Sharing API data from parent to service

I am building a website that shows the top 20 rated Sci-fi movies. The homepage component uses a GET request via a service to get an array of objects containing the moviesdata. This movie data is rendered usingngFor*` in its HTML template.

Each movie thumbnail has a click handler that routes to a different page that will display more information about that selected movie - i.e. description, ratings etc. For this second page, I am using a service that makes another GET request, where the query contains the selected movie's id as a parameter.

Homepage component that renders 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;
          // JSON to console
          console.warn(data);
        })
      }
    }`

Service 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');


       }
     }`

Single Movie page that will render the selected 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 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`)

  }

}

For now, I have only been able to hard code a movieId into the query, which works. I am still very new to angular, and I am trying to find a way to dynamically get the selected movie's id once it has been clicked, share it with the service, and make a GET request with that ID as one of the query's parameters.

You need to pass movieId to your each InfoPageComponent (which is child component, if I am not wrong)

home-card.component.html

<div *ngFor="let movie of movies;">
  <info-page [movieId]="movie.movieId"></info-page>
</div>

info-page.component.ts

export class InfoPageComponent {
  @input()
  movieId: number;

  ....
  getMovie() {
    this.dataService.getMovie(this.movieId).subscribe(...);
  }
}

Along with paranaaan's answer,

info-page.service.ts

public getMovie(movieId: number): IMovie {
    return this.http.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US`)
}

• Define route as

{ path: 'movieInfo/:id', component: InfoPageComponent }

• Navigate to the route

<a [routerLink]="['/movieInfo', movie.id]">{{movie.name}} </a>

• get route parameter in InfoPageComponent

this.id=this._Activatedroute.snapshot.paramMap.get("id");