ng create movies

ng g c components/search

ng g s services/api

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {throwError as observableThrowError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ResponseMovies } from '../interfaces/interfaces';


@Injectable({
  providedIn: 'root'
})
export class ApiService {
  API_KEY = '****';

 
  constructor(
    private http: HttpClient
  ) { }

  searchMovies(e:string):Observable<ResponseMovies>{
    return this.http.get<ResponseMovies>(`https://api.themoviedb.org/3/search/movie?api_key=${this.API_KEY}&language=en-US&query=${e}&page=1&include_adult=false`)
    .pipe(catchError(this.errorHandler));
  }

  errorHandler(error:HttpErrorResponse){
    return observableThrowError(error.message || "Server error");
  }
}

export interface ResponseMovies{
    results:Movie[]
  }
  
export interface Movie{
    id: number
    original_title: string
    poster_path: string 
  }

<div class="bg-image">
    <div class="search-wrapper">
      <h2>Your favorite movies.</h2>
      <input type="text" #search placeholder="Search movies">
      <div class="suggestions">
        <p *ngFor="let suggestion of suggestions | slice:0:5">
            {{suggestion.original_title}} 
        </p>
      </div>
    </div>
  </div>

import { Component,  AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';
import { fromEvent } from 'rxjs';
import { map, debounceTime, distinctUntilChanged, tap, filter } from 'rxjs/operators';
import { Movie } from 'src/app/interfaces/interfaces';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements AfterViewInit{
  
  @ViewChild('search') searchInput: ElementRef;

  suggestions:Movie[] = [];

  constructor(
    private apiService:ApiService
  ){}

  ngAfterViewInit() {
    
    // Api call search
    fromEvent(this.searchInput.nativeElement,'keyup')
      .pipe(
          map((event:any)=>{
            return event.target.value;
          }),
          filter(
            res =>{ 
              if(res.length > 2){
                return true;
              }else{
                this.suggestions = [];
                return false
              }
            }
          ),
          debounceTime(500),
          distinctUntilChanged(),
          tap(() => {
              
            this.handleSearch(this.searchInput.nativeElement.value)
          })
      ).subscribe()
}

    handleSearch(searchInput:string){
  
        this.apiService.searchMovies(searchInput).subscribe(data =>{
              this.suggestions = data.results;
            
        });

    }
}

<app-search></app-search>
<router-outlet></router-outlet>

ng g c components/movies-list

  ...

  getMovies():Observable<ResponseMovies>{
    return this.http.get<ResponseMovies>(`https://api.themoviedb.org/3/movie/popular?api_key=${this.API_KEY}&language=en-US&page=1`)
    .pipe(catchError(this.errorHandler));
  }
}

<section class="movies-section">
    <div class="container">
      <div class="subheading">Popular movies</div>
        <div class='movie-list'>
          <div *ngFor="let movie of movies | slice:0:10" class="movie-list__item">
            <img [src]="'https://image.tmdb.org/t/p/w185' + movie.poster_path" />
          </div>
        </div>
    </div>
  </section>

import { Component, OnInit } from '@angular/core';
import { Movie } from 'src/app/interfaces/interfaces';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-movies-list',
  templateUrl: './movies-list.component.html',
  styleUrls: ['./movies-list.component.scss']
})
export class MoviesListComponent implements OnInit {
  movies:Movie[] = [];
  constructor(
    private apiService:ApiService,
  ) { }

  ngOnInit(): void {
    this.getMovies();
  }

  getMovies():void {
    this.apiService.getMovies().subscribe(data =>{
      this.movies = data.results;
    });
  }
  
}

ng g c components/movie-page
ng g c components/page-not-found

ng g c components/main
ng g c components/footer

<app-search></app-search>
<app-movies-list></app-movies-list>
<app-top-movies></app-top-movies>

...
const routes: Routes = [
  {path:'', component:MainComponent},
  {path: 'movie/:id', component: MoviePageComponent},
  {path:'**', component: PageNotFoundComponent}
];
...

<router-outlet></router-outlet>
<app-footer></app-footer>

...
<p (click)="onSelect(suggestion)" *ngFor="let suggestion of suggestions | slice:0:5">
            {{suggestion.original_title}} 
</p>
...

...
import { Router } from '@angular/router';

...
  constructor(
    private router:Router,
    private apiService:ApiService
  ){}

  onSelect(suggestion:Movie){
      this.router.navigate(['/movie', suggestion.id]);
    }

...
export interface ResponseVideo{
  results:Video[]
}

  export interface MovieDetail{
    backdrop_path:string | null
    budget:number
    genres:Genre[]
    overview:string | null
    popularity: number
    release_date:string
    poster_path:string | null
    title:string
    tagline:string | null
  }

interface Genre{
  id:number
  name:string
}

export interface Video{
  key:string
}

...
  getMovieDetail(id:number):Observable<MovieDetail>{
    return this.http.get<MovieDetail>(` https://api.themoviedb.org/3/movie/${id}?api_key=${this.API_KEY}&language=en-US`)
    .pipe(catchError(this.errorHandler));
  }
  
  getMovieTrailer(id:number):Observable<ResponseVideo>{
    return this.http.get<ResponseVideo>(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=${this.API_KEY}&language=en-US`)
    .pipe(catchError(this.errorHandler));
  }

<div class="movie" >
    <div *ngIf="isLoading">
        <h3>Loading...</h3>
    </div>
     <ng-container *ngIf="movie">
        <div class="movie__detail movie-detail">
            <button class="btn-back" (click)="goHome()">&#8592; Back</button>
            <h2>{{movie.title}} ({{movie.release_date}})</h2>
                <span class="movie__genre" *ngFor='let genre of movie.genres'>
                    {{genre.name}}
                </span>
            <h3>Overview</h3>
            <p>{{movie.overview}}</p>
    
           <iframe *ngIf='video'  [src]="videoUrl" frameborder="0"></iframe>
        </div>
        <img class="movie__img" [src]="'https://image.tmdb.org/t/p/original' + movie.poster_path" />
     </ng-container>
</div>

export class MoviePageComponent implements OnInit {
  videoUrl;
  video:Video[];
  movie:MovieDetail;
  isLoading: boolean;
  constructor(
    private route:ActivatedRoute,
    private router:Router,
    private apiService:ApiService,
    private _sanitizer: DomSanitizer
  ) { }
  

  //get movie info on page init
  ngOnInit(): void {
    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.isLoading = true;
    this.apiService.getMovieDetail(id).subscribe(result => {
      this.movie = result    
    });
    
    this.apiService.getMovieTrailer(id).subscribe(data =>{
      this.isLoading = false;
      this.video = data.results;
      this.videoUrl = this._sanitizer.bypassSecurityTrustResourceUrl( `https://www.youtube.com/embed/${this.video[0].key}`);
    }, (err)=>{
      this.isLoading = false;
    })
  }

  goHome(){
    this.router.navigate(['']);
  }
}