set change detection on push

src/app/modules/shows/show/show.component.ts

@@ -1,8 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
 import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
-import {Observable} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {Show} from '../services/show';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -30,7 +30,7 @@ import {fade} from '../../../animations';
   styleUrls: ['./show.component.less'],
   animations: [fade],
 })
-export class ShowComponent implements OnInit {
+export class ShowComponent implements OnInit, OnDestroy {
   public show$: Observable<Show | null> | null = null;
   public songs: Song[] | null = null;
   public showSongs: ShowSong[] | null = null;
@@ -47,6 +47,7 @@ export class ShowComponent implements OnInit {
   public faUsers = faUsers;
   public faZoomIn = faMagnifyingGlassPlus;
   public faZoomOut = faMagnifyingGlassMinus;
+  private subs: Subscription[] = [];
 
   public constructor(
     private activatedRoute: ActivatedRoute,
@@ -54,7 +55,8 @@ export class ShowComponent implements OnInit {
     private songService: SongService,
     private showSongService: ShowSongService,
     private docxService: DocxService,
-    private router: Router
+    private router: Router,
+    private cRef: ChangeDetectorRef
   ) {}
 
   public ngOnInit(): void {
@@ -64,19 +66,30 @@ export class ShowComponent implements OnInit {
       tap((_: string) => (this.showId = _)),
       switchMap((showId: string) => this.showService.read$(showId))
     );
-    this.activatedRoute.params
-      .pipe(
-        map(param => param as {showId: string}),
-        map(param => param.showId),
-        switchMap(showId => this.showSongService.list$(showId)),
-        tap(_ => console.log(_)),
-        filter(_ => !!_ && _.length > 0)
-      )
-      .subscribe(_ => (this.showSongs = _));
-    this.songService
-      .list$()
-      .pipe(filter(_ => !!_))
-      .subscribe(_ => (this.songs = _));
+    this.subs.push(
+      this.activatedRoute.params
+        .pipe(
+          map(param => param as {showId: string}),
+          map(param => param.showId),
+          switchMap(showId => this.showSongService.list$(showId)),
+          filter(_ => !!_ && _.length > 0)
+        )
+        .subscribe(_ => {
+          this.showSongs = _;
+          this.cRef.markForCheck();
+        }),
+      this.songService
+        .list$()
+        .pipe(filter(_ => !!_))
+        .subscribe(_ => {
+          this.songs = _;
+          this.cRef.markForCheck();
+        })
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.subs.forEach(_ => _.unsubscribe());
   }
 
   public textSize = 1;
@@ -89,12 +102,6 @@ export class ShowComponent implements OnInit {
     this.textSize -= 0.1;
   }
 
-  public getSong(songId: string): Song | null {
-    if (!this.songs) return null;
-    const filtered = this.songs.filter(_ => _.id === songId);
-    return filtered.length > 0 ? filtered[0] : null;
-  }
-
   public async onArchive(archived: boolean): Promise<void> {
     if (this.showId != null) await this.showService.update$(this.showId, {archived});
   }

src/app/modules/shows/show/song/song.component.html

@@ -1,9 +1,12 @@
 <div *ngIf="iSong && iSong && show">
-  <div @fade *ngIf="show.published" class="title published">{{ iSong.key }} - {{ iSong.title }}</div>
+  <div *ngIf="show.published" class="title published">
+    <div class="key">{{ iSong.key }}</div>
+    <div>{{ iSong.title }}</div>
+  </div>
 
-  <div @fade *ngIf="!show.published" class="song">
+  <div *ngIf="!show.published" class="song">
     <span class="title">{{ iSong.title }}</span>
-    <span @fade class="keys" *ngIf="!edit">
+    <span *ngIf="!edit" class="keys">
       <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
       <mat-form-field *ngIf="keys" appearance="standard" class="keys">
         <mat-select [formControl]="keyFormControl">
@@ -11,26 +14,27 @@
         </mat-select>
       </mat-form-field>
     </span>
-    <app-menu-button @fade *ngIf="!edit" (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon" matTooltip="Lied für diese Veranstaltung bearbeiten"> </app-menu-button>
-    <app-menu-button @fade *ngIf="!edit" (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon" matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+    <app-menu-button (click)="onEdit()" *ngIf="!edit" [icon]="faEdit" class="btn-edit btn-icon"
+                     matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
+    <app-menu-button (click)="onDelete()" *ngIf="!edit" [icon]="faDelete" class="btn-delete btn-icon"
+                     matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
   </div>
 
-  <mat-form-field @fade appearance="outline" *ngIf="edit" >
+  <mat-form-field *ngIf="edit" appearance="outline">
     <mat-label>Songtext</mat-label>
     <textarea matTooltip="Tonart ändern"
-      [cdkTextareaAutosize]="true"
-      [formControl]="editSongControl"
-      matInput
+              [cdkTextareaAutosize]="true"
+              [formControl]="editSongControl"
+              matInput
     ></textarea>
   </mat-form-field>
-  <div @fade *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
-  <app-button-row @fade *ngIf="edit">
+  <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
+  <app-button-row *ngIf="edit">
     <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
     <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
   </app-button-row>
 
   <app-song-text
-    @fade
     (chordModeChanged)="onChordModeChanged($event)"
     *ngIf="!edit && (showText )"
     [chordMode]="iSong.chordMode"

src/app/modules/shows/show/song/song.component.less

@@ -35,6 +35,13 @@
   &.published {
     margin: 10px 0;
     font-weight: bold;
+    display: grid;
+    grid-template-columns: 1em auto;
+
+    .key {
+      color: #00b;
+      text-shadow: 0 0 1px #00b;
+    }
   }
 }