migrate angular 21

src/app/modules/presentation/monitor/legal/legal.component.html

@@ -1,14 +1,27 @@
-<ng-container *ngIf="song">
-  <p *ngIf="song.artist">{{ song.artist }}</p>
-  <p *ngIf="song.label">{{ song.label }}</p>
-  <p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
-  <p *ngIf="song.origin">{{ song.origin }}</p>
-
-  <div *ngIf="song.legalOwnerId">
-    <p *ngIf="song.legalOwner === 'CCLI' && config">
-      CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
-      {{ config.ccliLicenseId }}
-    </p>
-    <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
-  </div>
-</ng-container>
+@if (song) {
+  @if (song.artist) {
+    <p>{{ song.artist }}</p>
+  }
+  @if (song.label) {
+    <p>{{ song.label }}</p>
+  }
+  @if (song.termsOfUse) {
+    <p class="terms-of-use">{{ song.termsOfUse }}</p>
+  }
+  @if (song.origin) {
+    <p>{{ song.origin }}</p>
+  }
+  @if (song.legalOwnerId) {
+    <div>
+      @if (song.legalOwner === 'CCLI' && config) {
+        <p>
+          CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
+          {{ config.ccliLicenseId }}
+        </p>
+      }
+      @if (song.legalOwner !== 'CCLI') {
+        <p>Liednummer {{ song.legalOwnerId }}</p>
+      }
+    </div>
+  }
+}

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -1,13 +1,12 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../../songs/services/song';
 import {Config} from '../../../../services/config';
-import {NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-legal',
   templateUrl: './legal.component.html',
   styleUrls: ['./legal.component.less'],
-  imports: [NgIf],
+  imports: [],
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,48 +1,50 @@
 <div class="fullscreen background"></div>
-<div *ngIf="showType" [style.font-size.px]="zoom" class="fullscreen background">
-
-  <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
-  <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
-  <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
-  <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
-  <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
-
-
-  <div
-    [@songSwitch]="songId"
-    [class.blur]="songId === 'title' || songId === 'dynamicText'"
-    [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
-    [class.no-logo]="presentationBackground!=='none'"
-    class="start fullscreen logo"
-  >
-    <app-logo></app-logo>
+@if (showType) {
+  <div [style.font-size.px]="zoom" class="fullscreen background">
+    <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
+    <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
+    <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
+    <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
+    <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
+    <div
+      [@songSwitch]="songId"
+      [class.blur]="songId === 'title' || songId === 'dynamicText'"
+      [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
+      [class.no-logo]="presentationBackground!=='none'"
+      class="start fullscreen logo"
+      >
+      <app-logo></app-logo>
+    </div>
+    @if (songId === 'title') {
+      <div @songSwitch class="start fullscreen">
+        <div>{{ showType | showType }}</div>
+        <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
+      </div>
+    }
+    @if (songId === 'dynamicText') {
+      <div @songSwitch class="start fullscreen dynamic-text">
+        <div>{{ presentationDynamicCaption }}</div>
+        <div class="date">{{ presentationDynamicText }}</div>
+      </div>
+    }
+    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
+      <app-song-text
+        [@songSwitch]="songId"
+        [fullscreen]="true"
+        [header]="song.title"
+        [index]="index??0"
+        [showComments]="false"
+        [showSwitch]="false"
+        [text]="song.text"
+        chordMode="hide"
+      ></app-song-text>
+    }
+    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
+      <app-legal
+        [@songSwitch]="songId"
+        [config]="config$ | async"
+        [song]="song"
+      ></app-legal>
+    }
   </div>
-
-  <div *ngIf="songId === 'title'" @songSwitch class="start fullscreen">
-    <div>{{ showType | showType }}</div>
-    <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
-  </div>
-
-  <div *ngIf="songId === 'dynamicText'" @songSwitch class="start fullscreen dynamic-text">
-    <div>{{ presentationDynamicCaption }}</div>
-    <div class="date">{{ presentationDynamicText }}</div>
-  </div>
-
-  <app-song-text
-    *ngIf="song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
-    [@songSwitch]="songId"
-    [fullscreen]="true"
-    [header]="song.title"
-    [index]="index??0"
-    [showComments]="false"
-    [showSwitch]="false"
-    [text]="song.text"
-    chordMode="hide"
-  ></app-song-text>
-  <app-legal
-    *ngIf="song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
-    [@songSwitch]="songId"
-    [config]="config$ | async"
-    [song]="song"
-  ></app-legal>
-</div>
+}

src/app/modules/presentation/monitor/monitor.component.ts

@@ -11,7 +11,7 @@ import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSong} from '../../shows/services/show-song';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {openFullscreen} from '../../../services/fullscreen';
-import {AsyncPipe, DatePipe, NgIf} from '@angular/common';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {LogoComponent} from './logo/logo.component';
 import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
 import {LegalComponent} from './legal/legal.component';
@@ -22,7 +22,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
   templateUrl: './monitor.component.html',
   styleUrls: ['./monitor.component.less'],
   animations: [songSwitch],
-  imports: [NgIf, LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe],
+  imports: [LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class MonitorComponent implements OnInit, OnDestroy {
   public song: Song | null = null;
@@ -50,26 +50,24 @@ export class MonitorComponent implements OnInit, OnDestroy {
 
   public ngOnInit(): void {
     openFullscreen();
-    const currentShowId$ = this.globalSettingsService.get$
-      .pipe(
-        filter((settings): settings is NonNullable<typeof settings> => !!settings),
-        map(settings => settings.currentShow),
-        filter((showId): showId is string => !!showId),
-        distinctUntilChanged(),
-        tap(_ => (this.currentShowId = _)),
-        takeUntil(this.destroy$)
-      );
+    const currentShowId$ = this.globalSettingsService.get$.pipe(
+      filter((settings): settings is NonNullable<typeof settings> => !!settings),
+      map(settings => settings.currentShow),
+      filter((showId): showId is string => !!showId),
+      distinctUntilChanged(),
+      tap(_ => (this.currentShowId = _)),
+      takeUntil(this.destroy$)
+    );
 
-    const show$ = currentShowId$
-      .pipe(
-        switchMap(showId => this.showService.read$(showId)),
-        filter((show): show is Show => !!show),
-        shareReplay({
-          bufferSize: 1,
-          refCount: true,
-        }),
-        takeUntil(this.destroy$)
-      );
+    const show$ = currentShowId$.pipe(
+      switchMap(showId => this.showService.read$(showId)),
+      filter((show): show is Show => !!show),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      }),
+      takeUntil(this.destroy$)
+    );
 
     show$
       .pipe(