My problem is this: I am making a movie application and the idea is that, when I click on the details button, the information about the movie I have pressed is displayed but I do not know how to do it. I have been able to send to the url as if it were a GET request the id of the movie but that's where I have the problem: how do I show the information from that id number without showing all the movies? I attach work for now.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-character',
  templateUrl: './character.component.html',
  styleUrls: ['./character.component.css']
})
export class CharacterComponent implements OnInit {
  @Input() character: any;

  constructor() { }

  ngOnInit() {
  }

  /**
   * FUNCION QUE CAMBIA EL NOMBRE DE THOR
   * POR OTRO BIEN PUESTO
   * @param titulo string que recibe el titulo de la película
   * @returns título bien puesto
   */
  formatName(titulo: string) {
    if (titulo == 'Thor: Ragnarok') {
      return 'THOR (RAGNAROK)';
    } else {
      return titulo;
    }
  }

  /**
   * FUNCION QUE DEVUELVE LA FASE DE LA PELÍCULA
   * @param titulo titulo de la película
   * @returns la fase que le pertenece
   */
  muestroFase(titulo: string) {
    if (titulo == 'Iron Man' || titulo == 'Captain America' || titulo == 'The Avengers') {
      return "Fase 1";
    } else if (titulo == 'Ant-man') {
      return "Fase 2";
    } else {
      return "Fase 3";
    }
  }

}

The charcater.ts that contacts the.component services API to display the information.

<mat-card>
  <img mat-card-image src="{{character.poster}}" alt="{{character.name}}">
  <mat-card-title>
    {{character.id}}.- {{formatName(character.name)}} {{muestroFase(character.name)}}
  </mat-card-title>
  <mat-card-footer>
    <a routerLink="/info/{{character.id}}" fxFlex mat-flat-button color="primary">
      Detalles
    </a>
  </mat-card-footer>
</mat-card>

The html of this component that displays the movies.