Currently, I am engrossed in a project that aims to display information about movies. By utilizing @Input(), I am establishing a connection between the movie details from the parent component (movies) and the child component (movie-detail).
Movies Parent Component
import { Component, OnInit } from '@angular/core';
import { IMovie } from './movie';
import { MoviesService } from './movies.service';
import { IPopular } from './popular';
import { HttpClient } from '@angular/common/http';
import { MovieDetailComponent } from '../movie-detail/movie-detail.component';
@Component({
selector: 'app-movies',
templateUrl: './movies.component.html',
styleUrls: ['./movies.component.css']
})
export class MoviesComponent implements OnInit {
moviesList: IPopular[] = [];
movie: IMovie;
selectedMovie: IMovie;
constructor(private _moviesService: MoviesService) { }
ngOnInit() {
this._moviesService.getPopularMovies()
.subscribe(moviesList => {
this.moviesList = moviesList;
},
error => console.log(error)
);
}
onSelect(movie: IMovie): void {
this.selectedMovie = movie;
window.setTimeout(function() {window.scrollTo(0, 5000); }, 300);
}
}
Parent HTML
<div>
<ul class="movies" *ngFor="let movie of moviesList.results">
<li [class.selected]="movie === selectedMovie" (click)="onSelect(movie)">
<img class="poster" [src]="'https://image.tmdb.org/t/p/w200/'+ movie.poster_path">
<br> {{movie.title}}
</li>
</ul>
</div>
<app-movie-detail [movie]='selectedMovie'></app-movie-detail>
IMovie Interface Definition
export interface IMovie {
vote_count: number;
id: number;
video: boolean;
vote_average: number;
title: string;
popularity: number;
poster_path: string;
original_language: string;
original_title: string;
genre_ids: number[];
backdrop_path: string;
adult: boolean;
overview: string;
release_date: string;
}
IPopular Interface Definition
import { IMovie } from './movie';
export interface IPopular {
results: Array<IMovie>;
page: number;
total_results: number;
dates: DateTimeFormat;
total_pages: number;
}
Child Component Details
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { IResult } from './result';
import { IVideo } from './video';
import { IMovie } from '../movies/movie';
import { MovieDetailService } from './movie-detail.service';
@Component({
selector: 'app-movie-detail',
templateUrl: './movie-detail.component.html',
styleUrls: ['./movie-detail.component.css']
})
export class MovieDetailComponent implements OnChanges {
@Input() movie: IMovie;
videoList: IVideo[] = [];
video: IResult;
constructor(private _moviedetailService: MovieDetailService) { }
ngOnChanges() {
this._moviedetailService.getTrailer(this.movie.id)
.subscribe(videoList => {
this.videoList = videoList;
},
error => console.log(error)
);
}
ScrollToTop(): void {
window.setTimeout(function() {window.scrollTo(5000, 0); }, 300);
}
}
Child HTML Details
<body class="background" [background]="'https://image.tmdb.org/t/p/original'+ movie.backdrop_path" *ngIf="movie">
...
Upon implementing these codes, an ERROR message stating "TypeError: Cannot read property 'id' of undefined" is encountered.
ERROR TypeError: Cannot read property 'id' of undefined
at MovieDetailComponent.ngOnChanges (movie-detail.component.ts:22)
...
Any suggestions on how to resolve this issue?