Puedes recibir el dato de la url utilizando ActivatedRoute según la documentación puedes ver lo que dice:
Provides access to information about a route associated with a component that is loaded in an outlet
Traducción:
Proporciona acceso a información sobre una ruta asociada a un componente que se carga en una toma de corriente
Básicamente, en el objeto de tipo AtivatedRoute tenemos observables que nos sirve para suscribirnos a cambios en los parámetros enviados al componente.
Veamos un ejemplo, en el método ngOnInit agregamos lo siguiente:
this.route.paramMap.subscribe((params: ParamMap) => {
console.log('Esto recibo desde url:', params.get('id'));
});
Como puedes ver si la url es http://localhost:4200/playlist/2
en la consola deberías ver:
Esto recibo desde url: 2
Expliquemos un poco: Accedemos a la propiedad paramMap, esto porque paramMap detectará el cambio "incluso cuando se realiza en el mismo componente", y posteriormente mostramos en consola el id que pasaste por url.
Ahora según tu lógica "la cual no voy a corregir en este caso" iteras en el HTML comparando los id de los objetos y así mostrar el que ingresó por url, continuando con lo que ya hiciste la forma más sencilla que veo es usar una variable id que se igualará con el parámetro recibido por url como se ve a continuación.
public idPlaylist; // id ingresado por url
Y en el observable donde mostrábamos el mensaje en consola lo corregimos:
this.route.paramMap.subscribe((params: ParamMap) => {
this.idPlaylist = params.get('id');
});
Quedando tu typescript de la siguiente forma:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ActivatedRoute, ParamMap } from '@angular/router';
@Component({
selector: 'app-play-list',
templateUrl: './play-list.component.html',
styleUrls: ['./play-list.component.scss']
})
export class PlayListComponent implements OnInit {
// teams$ = this.http.get('/ api / teams');
playlists$: Observable<any> = this.http.get('/api/playlists');
public idPlaylist; // id ingresado por url
constructor(private http: HttpClient, private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe((params: ParamMap) => {
this.idPlaylist = params.get('id');
});
}
}
Finalmente nos vamos al HTML y reemplazamos el id que utilizabas por la variable idPlaylist:
<div *ngFor="let playlist of playlists$ | async" class="top-info">
<div *ngIf="playlist.id == idPlaylist"> <!-- Aquí va el id recibido por url -->
<img src="{{playlist.avatar}}" alt="avatar" class="img-avatar" />
<p>{{ playlist.name }}</p>
</div>
</div>
De esta forma deberías poder cambiar entre playlist según cambies la url manualmente o por medio de un link.