Albums

Routing

{ path: 'albums', component: AlbumsComponent, title: 'Albums' },

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private readonly url = 'https://jsonplaceholder.typicode.com/albums';
  private readonly albumUrl = 'https://jsonplaceholder.typicode.com/photos?albumId=';

  constructor(private readonly http: HttpClient) {}

  getAlbums$(): Observable<any[]> {
    return this.http.get<any[]>(this.url);
  }

}

Component

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-albums',
  templateUrl: './albums.component.html',
  styleUrls: ['./albums.component.scss'],
})
export class AlbumsComponent implements OnInit {
  albums: any[] = [];

  constructor(private readonly apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getAlbums$().subscribe((data) => {
      this.albums = data;
    });
  }
}

Template

<div class="card" 
*ngFor="let album of albums">
    <a 
    class="card-link" 
    [routerLink]="['/albums', album.id]">
        #{{ album.id }} - {{ album.title }}
    </a>
</div>