songlist click causes routing

src/app/songs/models/song.ts

@@ -1,4 +1,5 @@
 export interface Song {
+  id: string;
   comment: string;
   final: boolean;
   key: string;

src/app/songs/services/song-data.service.ts

@@ -2,17 +2,23 @@ import {Injectable} from '@angular/core';
 import {AngularFirestore, AngularFirestoreCollection} from '@angular/fire/firestore';
 import {Song} from '../models/song';
 import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SongDataService {
   private songCollection: AngularFirestoreCollection<Song>;
-  private songs: Observable<Song[]>;
+  private readonly songs: Observable<Song[]>;
 
   constructor(private afs: AngularFirestore) {
     this.songCollection = afs.collection<Song>('songs');
-    this.songs = this.songCollection.valueChanges();
+    this.songs = this.songCollection.snapshotChanges().pipe(map(actions => {
+      return actions.map(a => ({
+        ...a.payload.doc.data(),
+        id: a.payload.doc.id
+      }));
+    }));
   }
 
   public list = (): Observable<Song[]> => this.songs;

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 = this.songService.list().pipe(map(songs =>
-      this.songs = songs.sort((a, b) => a.number - b.number);
+      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

src/app/songs/songs.module.ts

@@ -5,14 +5,12 @@ import {SongsRoutingModule} from './songs-routing.module';
 import {SongComponent} from './song/song.component';
 import {SongListModule} from './song-list/song-list.module';
 
-
 @NgModule({
   declarations: [SongComponent],
   imports: [
     CommonModule,
     SongsRoutingModule,
     SongListModule,
-
   ]
 })
 export class SongsModule {

src/app/widget-modules/components/card/card.component.less

@@ -5,6 +5,7 @@
   margin: 20px;
   border-radius: 8px;
   background: #fffe;
+  overflow: hidden;
 
   &.padding {
     padding: 20px;