songlist click causes routing

src/app/songs/song-list/song-list.component.html

@@ -1,3 +1,3 @@
 <app-card [padding]="false">
-  <app-list-item *ngFor="let song of songs" [song]="song"></app-list-item>
+  <app-list-item *ngFor="let song of songs | async" [song]="song" [routerLink]="song.id"></app-list-item>
 </app-card>

src/app/songs/song-list/song-list.component.ts

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
 import {Song} from '../models/song';
+import {map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'app-songs',
@@ -8,15 +10,15 @@ import {Song} from '../models/song';
   styleUrls: ['./song-list.component.less']
 })
 export class SongListComponent implements OnInit {
-  public songs: Song[];
+  public songs: Observable<Song[]>;
 
   constructor(private songService: SongService) {
   }
 
   ngOnInit() {
-    this.songService.list().subscribe(songs => {
-      this.songs = songs.sort((a, b) => a.number - b.number);
-    });
+    this.songs = this.songService.list().pipe(map(songs =>
+      songs.sort((a, b) => a.number - b.number)
+    ));
   }
 
 }

src/app/songs/song-list/song-list.module.ts

@@ -4,6 +4,7 @@ import {SongListComponent} from './song-list.component';
 import {ListItemComponent} from './list-item/list-item.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-translater/song-type-translater.module';
+import {RouterModule} from '@angular/router';
 
 
 @NgModule({
@@ -11,6 +12,7 @@ import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-tra
   exports: [SongListComponent],
   imports: [
     CommonModule,
+    RouterModule,
 
     CardModule,
     SongTypeTranslaterModule