saimon24

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
 
// Typescript custom enum for search types (optional)
export enum SearchType {
  all = '',
  movie = 'movie',
  series = 'series',

saimon24

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
 
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
 
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

saimon24

# Install Ionic if you haven't before
npm install -g ionic
 
# Create a blank new Ionic 4 app with Angular support
ionic start movieApp blank --type=angular
cd movieApp
 
# Use the CLI to generate some pages and a service
ionic g page pages/movies
ionic g page pages/movieDetails

saimon24

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
const routes: Routes = [
  { path: '', redirectTo: 'movies', pathMatch: 'full' },
  { path: 'movies', loadChildren: './pages/movies/movies.module#MoviesPageModule' },
  { path: 'movies/:id', loadChildren: './pages/movie-details/movie-details.module#MovieDetailsPageModule' }
];
 
@NgModule({

saimon24

.item-group {
    padding: 10;
}
 
.item-label {
    font-weight: bold;
}

saimon24

<ActionBar [title]="name">
  <NavigationButton text="Back" android.systemIcon="ic_menu_back" (tap)="navigateBack()"></NavigationButton>
</ActionBar>
<StackLayout class="item-group">
  <Label [text]="'Height:' + height" textWrap="true"></Label>
  <Label [text]="'Weight:' + weight" textWrap="true"></Label>
  <Image [src]="pokeimg"></Image>
 
  <ActivityIndicator
    [busy]="isLoading"

saimon24

import { Component } from "@angular/core";
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/add/operator/map';
import {Router, ActivatedRoute} from "@angular/router";
 
@Component({
  selector: "pokemon-page",
  providers: [HTTP_PROVIDERS],
  templateUrl: "pages/pokemon/pokemon.component.html"
})

saimon24

.small-spacing {
  margin: 5;
}
 
.medium-spacing {
  margin: 10;
}
 
ListView {
  opacity: 0;

saimon24

<ActionBar title="My Pokedex"></ActionBar>
<GridLayout>
  <Image src="http://pokeapi.co/media/sprites/pokemon/150.png" [class.hide]="!isLoading"></Image>
 
  <ListView [items]="pokemon" [class.visible]="listLoaded" class="small-spacing" (itemTap)="showDetails($event)">
    <template let-item="item" let-x="index">
      <DockLayout stretchLastChild="true">
          <Image 
            dock="left" 
            [src]="'http://pokeapi.co/media/sprites/pokemon/' + (x+1) + '.png'"

saimon24

import { Component } from "@angular/core";
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/add/operator/map';
import {Router} from "@angular/router";
 
@Component({
  selector: "list",
  providers: [HTTP_PROVIDERS],
  templateUrl: "pages/list/list.component.html"
})