🎙️ Finished up the logic for ArtistsComponent.

src/app/components/artists/artists.component.html

@@ -10,16 +10,23 @@
 
 <ng-template #artistInfo>
 
-  <h2>{{ artistData.name }}'s profile</h2>
+  <div *ngIf="artistData" class="container">
 
-  <hr>
+    <h2>{{ artistData.name }}'s profile</h2>
 
-  <h4>{{ artistData.name }}'s songs</h4>
+    <hr>
 
-  <ul>
+    <h4>{{ artistData.name }}'s albums</h4>
-    <li *ngFor="let song of songs">
+    <ul>
-      {{ song.name }}
+      <li *ngFor="let album of albums">
-    </li>
+        <a [routerLink]="'/albums/' + album.id">{{ album.name }}</a>
-  </ul>
+      </li>
+    </ul>
+
+    <h4>{{ artistData.name }}'s songs</h4>
+
+    <app-songlist *ngIf="songs" [songs]="songs"></app-songlist>
+
+  </div>
 
 </ng-template>

src/app/components/artists/artists.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ApiService } from 'src/app/services/api.service';
-import { Artist, Song } from '../../classes/entities';
+import { Artist, Song, Album } from '../../classes/entities';
 
 @Component({
   selector: 'app-artists',
@@ -13,6 +13,7 @@ export class ArtistsComponent implements OnInit {
   artistData: Artist;
   artists: Promise<Array<Artist>>;
   songs: Array<Song>;
+  albums: Array<Album>;
 
   constructor(
     private api: ApiService,
@@ -29,7 +30,10 @@ export class ArtistsComponent implements OnInit {
         // ... then get artist data ...
         this.api.getArtist(Number(params.get('id'))).then(async res => {
           this.artistData = res;
-          this.songs = await this.api.getSong(res.songs.join());
+          const songs = await this.api.getSong(res.songs.join());
+          this.songs = songs.length ? songs : [songs];
+          const albums = await this.api.getAlbum(res.albums.join());
+          this.albums = albums.length ? albums : [albums];
         });
 
       } else {