Currently, I am in the process of developing a website dedicated to showcasing the top 20 highest-rated Sci-fi movies. The main component on the homepage leverages a GET request via a service to fetch an array of objects containing the movie data. This movie data is then displayed using `ngFor*` in the HTML template.
Each movie thumbnail on the homepage has a click handler that navigates to a separate page for more detailed information about the selected movie, including its description and ratings. For this secondary page, a service is utilized to make another GET request, with the query parameter being the ID of the selected movie.
The homepage component responsible for rendering the initial API movie data:
import { Component } from '@angular/core';
import { MovieDataService } from '../services/movie-data.service';
@Component({
selector: 'home-card',
templateUrl: './home-card.component.html',
styleUrls: ['./home-card.component.css']
})
export class HomeCardComponent {
movieData: any = {};
constructor(private movieDataService: MovieDataService) {}
ngOnInit(): void {
this.movieDataService.getData().subscribe((data) => {
this.movieData = data;
// Output JSON to console
console.warn(data);
})
}
}`
Service used for the homepage:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MovieDataService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get('https://api.themoviedb.org/3/discover/movie?api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US&with_genres=878');
}
}`
The Single Movie page which will display the chosen movie's data:
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DataService } from '../services/data.service';
@Component({
selector: 'info-page',
templateUrl: './info-page.component.html',
styleUrls: ['./info-page.component.css']
})
export class InfoPageComponent {
singleMovieData: any = {} ;
constructor(private DataService: DataService) {}
ngOnInit(): void {
this.DataService.getMovie().subscribe((data) => {
this.singleMovieData = data;
console.warn(data);
})
}
}`
Service used for the Single Movie page:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
movieId = 505642;
getMovie() {
return this.http.get(`https://api.themoviedb.org/3/movie/${this.movieId}?api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US`)
}
}
As of now, I have hardcoded a movieId into the query, which is functional. Since I am still relatively new to Angular, I am exploring ways to dynamically capture the selected movie's id upon clicking, pass it to the service, and execute a GET request with that ID as one of the query parameters.