💽 Copied ArtistsComponent to AlbumsComponent

And, of course, altered everything that was needed to be altered.

src/app/classes/entities.ts

@@ -65,8 +65,9 @@ export class Album {
   // The following list are identical to the items returned from the api.
   id: number;
   name: string;
-  artist: number;
+  artist: number[];
   image: string;
+  song: number[];
   type = 'Album';
 
   data: DataService;
@@ -76,10 +77,7 @@ export class Album {
     this.name = data.data.result[0].name;
     this.artist = data.data.result[0].artist;
     this.image = data.data.result[0].image;
-  }
+    this.song = data.data.result[0].song;
-
-  async getArtist() {
-    return new Artist(await this.data.getArtist(this.artist));
   }
 
   // There will be more functions here...

src/app/components/albums/albums.component.html

@@ -1 +1,40 @@
-<p>albums works!</p>
+<ng-container *ngIf="( albums | async ) as albums; else albumInfo">
+
+  <ul>
+    <li *ngFor="let album of albums">
+      <a [routerLink]="'/albums/' + album.id">{{ album.name }}</a>
+    </li>
+  </ul>
+
+</ng-container>
+
+<ng-template #albumInfo>
+
+  <div *ngIf="albumData" class="container">
+
+    <h2>{{ albumData.name }}'s data</h2>
+
+    <hr>
+
+    <div class="content">
+
+      <div>
+        <h4>Artists of {{ albumData.name }} </h4>
+        <ul>
+          <li *ngFor="let artist of artists">
+            <a [routerLink]="'/artists/' + artist.id">{{ artist.name }}</a>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h4>{{ albumData.name }}'s songs</h4>
+
+        <app-songlist *ngIf="songs" [songs]="songs"></app-songlist>
+      </div>
+
+    </div>
+
+  </div>
+
+</ng-template>

src/app/components/albums/albums.component.scss

@@ -0,0 +1,4 @@
+div.content {
+  display: grid;
+  grid-template-columns: auto auto;
+}

src/app/components/albums/albums.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ApiService } from 'src/app/services/api.service';
+import { Artist, Song, Album } from '../../classes/entities';
 
 @Component({
   selector: 'app-albums',
@@ -7,9 +10,41 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AlbumsComponent implements OnInit {
 
-  constructor() { }
+  albumData: Album;
+  albums: Promise<Array<Album>>;
+  songs: Array<Song>;
+  artists: Array<Artist>;
+
+  constructor(
+    private api: ApiService,
+    private route: ActivatedRoute
+  ) { }
 
   ngOnInit() {
+
+    this.route.paramMap.subscribe(params => {
+
+      // If the id argument is given...
+      if (params.has('id')) {
+
+        // ... then get artist data ...
+        this.api.getAlbum(Number(params.get('id'))).then(async res => {
+          this.albumData = res;
+          const songs = await this.api.getSong(res.song.join());
+          this.songs = songs.length ? songs : [songs];
+          const artists = await this.api.getArtist(res.artist.join());
+          this.artists = artists.length ? artists : [artists];
+        });
+
+      } else {
+
+        // Otherwise, get all artists and list them out.
+        this.albums = this.api.getAllAlbums();
+
+      }
+
+    });
+
   }
 
 }