detail view

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

@@ -22,5 +22,11 @@ export class SongDataService {
   }
 
   public list = (): Observable<Song[]> => this.songs;
+  public read = (songId: string): Observable<Song | undefined> =>
+    this.afs.doc<Song>('songs/' + songId).valueChanges().pipe(map(song => ({
+      ...song,
+      id: songId
+    } as Song)))
+
 
 }

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

@@ -12,5 +12,6 @@ export class SongService {
   }
 
   public list = (): Observable<Song[]> => this.songDataService.list();
+  public read = (songId: string): Observable<Song | undefined> => this.songDataService.read(songId);
 
 }

src/app/songs/song-list/list-item/list-item.component.less

@@ -1,7 +1,7 @@
 @import "../../../../styles/styles";
 
 .list-item {
-  padding: 10px 20px;
+  padding: 5px 20px;
   display: grid;
   grid-template-columns: 50px auto 30px 100px;
 
@@ -20,4 +20,5 @@
 .number {
   font-size: 18px;
   font-weight: bold;
+  text-align: right;
 }

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

@@ -1 +1,15 @@
-<p>song works with songId: {{songId}}!</p>
+<app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title">
+  <div class="song">
+    <div class="text">{{song.text}}</div>
+    <div>
+      <div class="detail">
+        <div>Typ</div>
+        <div>{{song.type | songType}}</div>
+        <div>Tonart</div>
+        <div>{{song.key}}</div>
+        <div>Tempo</div>
+        <div>{{song.tempo}}</div>
+      </div>
+    </div>
+  </div>
+</app-card>

src/app/songs/song/song.component.less

@@ -0,0 +1,15 @@
+.song {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  column-gap: 20px;
+  margin-top: 20px;
+}
+
+.text {
+  white-space: pre-wrap;
+}
+
+.detail {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}

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

@@ -1,5 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
+import {SongService} from '../services/song.service';
+import {map, switchMap} from 'rxjs/operators';
+import {Song} from '../models/song';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'app-song',
@@ -7,13 +11,16 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./song.component.less']
 })
 export class SongComponent implements OnInit {
-  public songId: string;
+  public song$: Observable<Song>;
 
-  constructor(private activatedRoute: ActivatedRoute) {
+  constructor(private activatedRoute: ActivatedRoute, private songService: SongService) {
   }
 
   public ngOnInit(): void {
-    this.activatedRoute.params.subscribe(params => this.songId = params.songId);
+    this.song$ = this.activatedRoute.params.pipe(
+      map(param => param.songId),
+      switchMap(songId => this.songService.read(songId))
+    );
   }
 
 }

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {SongComponent} from './song.component';
+import {CardModule} from '../../widget-modules/components/card/card.module';
+import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-translater/song-type-translater.module';
+
+
+
+@NgModule({
+  declarations: [SongComponent],
+  exports: [SongComponent],
+  imports: [
+    CommonModule,
+    CardModule,
+
+    SongTypeTranslaterModule
+  ]
+})
+export class SongModule { }

src/app/songs/songs.module.ts

@@ -2,15 +2,16 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {SongsRoutingModule} from './songs-routing.module';
-import {SongComponent} from './song/song.component';
 import {SongListModule} from './song-list/song-list.module';
+import {SongModule} from './song/song.module';
 
 @NgModule({
-  declarations: [SongComponent],
+  declarations: [],
   imports: [
     CommonModule,
     SongsRoutingModule,
     SongListModule,
+    SongModule
   ]
 })
 export class SongsModule {

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

@@ -1,3 +1,4 @@
 <div [class.padding]="padding" class="card">
+  <div class="heading" *ngIf="heading">{{heading}}</div>
   <ng-content></ng-content>
 </div>

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

@@ -11,3 +11,8 @@
     padding: 20px;
   }
 }
+
+.heading {
+  font-size: 20px;
+  font-weight: bold;
+}

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

@@ -7,6 +7,7 @@ import {Component, Input, OnInit} from '@angular/core';
 })
 export class CardComponent implements OnInit {
   @Input() padding = true;
+  @Input() heading: string;
 
   constructor() {
   }