Source Code

 
In case GitHub repo is not available, and you can only use a code provided below. This is what the project folder looks like:
 
 
 
app.module.ts
 
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';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
 
list.page.html
 
    
<ion-header>
  <ion-toolbar>
    <ion-title>List Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-item>
        <ion-label color="primary" stacked>Search movie database</ion-label>
        <ion-input type="text" (input)="searchForMovie($event, searchKey)"></ion-input>
    </ion-item>
 
    <ion-list>    
        <ion-item *ngFor="let movie of movies" (click)="selectMovie($event, movie)">
			<ion-thumbnail slot="start">
				<img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}">
			</ion-thumbnail>
			<ion-label>
				<h2>{{movie.original_title}}</h2>
				<p>{{movie.overview}}</p>
			</ion-label>
        </ion-item>
    </ion-list>   
</ion-content>
 
list.page.ts
 
import { Component, OnInit } from '@angular/core';
import { MovieServiceService } from '../../services/movie-service.service';
import { InfoPage } from '../info/info.page';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list',
  templateUrl: './list.page.html',
  styleUrls: ['./list.page.scss'],
})
export class ListPage {

    movies: any[];
 
    constructor(private movieService: MovieServiceService, private router: Router) {
 
    }
 
    searchForMovie(event, key) {
        if(event.target.value.length > 2) {
		    this.movieService.searchMovies(event.target.value).subscribe((res)=>{
		    	this.movies = res;
		    });
        }
    }  
     
    selectMovie(event, movie) {
        console.log(movie);
        this.router.navigateByUrl('/info/' + movie.id);
    }
}
 
movie-service.service.ts
 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Movies } from '../services/movies';

@Injectable({
  providedIn: 'root'
})
export class MovieServiceService {
 
	apiURL: string = 'http://api.themoviedb.org/3/search/movie?query=&query=';
	apiKey: string = 'api_key=5fbddf6b517048e25bc3ac1bbeafb919';
	movies: any = [];

	constructor(private http: HttpClient) { 

	}

	searchMovies(movieName: string) {
		return this.http.get<any>(`${this.apiURL}` + encodeURI(movieName) + `&${this.apiKey}`).pipe(
    		map(model => {
    				this.movies = model.results;
		      		return model.results;
    			}
    		)
    	);	
	}

	getMovieFromCache(id: string) {
		let cachedMovie = null;

	    this.movies.forEach(movie => {
			if (movie.id == id) {
				cachedMovie = movie;
	      	}
	    });

	    console.log(cachedMovie);

	    return cachedMovie;
	}
}
 
info.page.html
 
<ion-header>
	<ion-toolbar>
		<ion-buttons slot="start">
		  	<ion-back-button></ion-back-button>
		</ion-buttons>  	
		<ion-title>Info Page</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content>
	<ion-card *ngIf="movie">
		<img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/>
		<ion-card-header>
			<ion-card-subtitle>{{movie.release_date}}</ion-card-subtitle>
			<ion-card-title>{{movie.title}}</ion-card-title>
		</ion-card-header>

		<ion-card-content>{{movie.overview}}</ion-card-content>
	</ion-card>
</ion-content>
 
info.page.ts
 
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MovieServiceService } from '../../services/movie-service.service';

@Component({
  selector: 'app-info',
  templateUrl: './info.page.html',
  styleUrls: ['./info.page.scss'],
})
export class InfoPage implements OnInit {

	id: string;
	movie: {};

  	constructor(private movieService: MovieServiceService, private route: ActivatedRoute) { }

	ngOnInit() {
		this.id = this.route.snapshot.paramMap.get('id');
		this.movie = this.movieService.getMovieFromCache(this.id);
	}

}
 

Deployment

 
Next step, build our application:
 
ionic build android
 
or
ionic build browser
 
Be careful here, this step may break if you’re behind a firewall. The first execution will take a long time, so be patient.
 
Finally:
 
ionic run android -l -c -s
 
or
ionic run browser -l -c -s
 
or if you want to test it in your browser:
 
ionic serve
 

Download The Code

 
Working GitHub repo link can be found below:
 
GitHub
 
 

More Ionic 4 Tutorials

 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.