migrate angular 21

angular.json

@@ -155,6 +155,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

package.json

@@ -11,60 +11,59 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.5",
+    "@angular/animations": "^21.2.2",
-    "@angular/cdk": "^19.0.4",
+    "@angular/cdk": "^21.2.1",
-    "@angular/common": "^19.0.5",
+    "@angular/common": "^21.2.2",
-    "@angular/compiler": "^19.0.5",
+    "@angular/compiler": "^21.2.2",
-    "@angular/core": "^19.0.5",
+    "@angular/core": "^21.2.2",
-    "@angular/fire": "^18.0.1",
+    "@angular/fire": "^21.0.0-rc.0",
-    "@angular/forms": "^19.0.5",
+    "@angular/forms": "^21.2.2",
-    "@angular/material": "^19.0.4",
+    "@angular/material": "^21.2.1",
-    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser": "^21.2.2",
-    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^21.2.2",
-    "@angular/router": "^19.0.5",
+    "@angular/router": "^21.2.2",
-    "@angular/service-worker": "^19.0.5",
+    "@angular/service-worker": "^21.2.2",
-    "@fortawesome/angular-fontawesome": "^0.14.1",
+    "@fortawesome/angular-fontawesome": "^4.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "docx": "^8.5.0",
+    "docx": "^9.6.0",
-    "firebase": "^10.8.0",
+    "firebase": "^12.10.0",
     "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^7.0.5",
+    "ngx-mat-select-search": "^8.0.4",
-    "qrcode": "^1.5.3",
+    "qrcode": "^1.5.4",
-    "rxfire": "^6.0.5",
     "rxjs": "~7.8.1",
-    "swiper": "^11.0.6",
+    "swiper": "^12.1.2",
-    "tslib": "^2.6.2",
+    "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1900.6",
+    "@angular-devkit/architect": "0.2102.1",
-    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular-devkit/build-angular": "^21.2.1",
-    "@angular-eslint/builder": "19.0.2",
+    "@angular-eslint/builder": "21.3.0",
-    "@angular-eslint/eslint-plugin": "19.0.2",
+    "@angular-eslint/eslint-plugin": "21.3.0",
-    "@angular-eslint/eslint-plugin-template": "19.0.2",
+    "@angular-eslint/eslint-plugin-template": "21.3.0",
-    "@angular-eslint/schematics": "19.0.2",
+    "@angular-eslint/schematics": "21.3.0",
-    "@angular-eslint/template-parser": "19.0.2",
+    "@angular-eslint/template-parser": "21.3.0",
-    "@angular/cli": "^19.0.6",
+    "@angular/cli": "^21.2.1",
-    "@angular/compiler-cli": "^19.0.5",
+    "@angular/compiler-cli": "^21.2.2",
-    "@angular/language-service": "^19.0.5",
+    "@angular/language-service": "^21.2.2",
-    "@types/jasmine": "~5.1.4",
+    "@types/jasmine": "~6.0.0",
     "@types/jasminewd2": "~2.0.13",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.24",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/parser": "^8.57.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.39.4",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.5.5",
-    "firebase-tools": "^13.3.1",
+    "firebase-tools": "^14.27.0",
-    "jasmine-core": "~5.1.2",
+    "jasmine-core": "~6.1.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-jasmine-html-reporter": "^2.2.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.8.1",
-    "typescript": "~5.5.4"
+    "typescript": "~5.9.3"
   }
 }

src/app/modules/brand/new-user/new-user.component.html

@@ -1,6 +1,7 @@
 <div class="frame">
   <app-brand class="brand"></app-brand>
-  <div *ngIf="user$ | async as user" class="text">
+  @if (user$ | async; as user) {
+    <div class="text">
       <div class="welcome">WILLKOMMEN</div>
       <div class="name">{{ user.name }}</div>
       <div class="roles">
@@ -8,4 +9,5 @@
         Administrator!
       </div>
     </div>
+  }
 </div>

src/app/modules/brand/new-user/new-user.component.ts

@@ -3,13 +3,13 @@ import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
 import {BrandComponent} from '../brand.component';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrls: ['./new-user.component.less'],
-  imports: [BrandComponent, NgIf, AsyncPipe],
+  imports: [BrandComponent, AsyncPipe],
 })
 export class NewUserComponent {
   public user$: Observable<User | null> | null = null;

src/app/modules/guest/guest.component.html

@@ -1,25 +1,28 @@
-<div *ngIf="show$|async as show" class="page">
+@if (show$|async; as show) {
+  <div class="page">
     <div class="title">
       <div class="left">{{ show.showType|showType }}</div>
       <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
     </div>
-
     <div class="view">
       <swiper-container scrollbar="true">
-      <swiper-slide *ngFor="let song of show.songs; let i = index; trackBy: trackBy"
+        @for (song of show.songs; track trackBy(i, song); let i = $index) {
+          <swiper-slide
             class="song-swipe">
             <div class="song-title">{{ song.title }}</div>
-
             <div class="legal">
-          <p *ngIf="song.artist">{{ song.artist }}</p>
+              @if (song.artist) {
+                <p>{{ song.artist }}</p>
+              }
             </div>
-
             <app-song-text
               [text]="song.text"
             ></app-song-text>
           </swiper-slide>
+        }
       </swiper-container>
     </div>
   </div>
+}
 
 

src/app/modules/guest/guest.component.ts

@@ -4,7 +4,7 @@ import {ActivatedRoute} from '@angular/router';
 import {map, switchMap} from 'rxjs/operators';
 import {Song} from '../songs/services/song';
 import {ConfigService} from '../../services/config.service';
-import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
@@ -13,7 +13,7 @@ import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show
   templateUrl: './guest.component.html',
   styleUrls: ['./guest.component.less'],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [NgIf, NgFor, SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
+  imports: [SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class GuestComponent {
   public show$ = this.currentRoute.params.pipe(

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

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

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,13 +1,11 @@
 <div class="fullscreen background"></div>
-<div *ngIf="showType" [style.font-size.px]="zoom" class="fullscreen background">
+@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'"
@@ -17,19 +15,20 @@
       >
       <app-logo></app-logo>
     </div>
-
+    @if (songId === 'title') {
-  <div *ngIf="songId === 'title'" @songSwitch class="start fullscreen">
+      <div @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">
+    @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
-    *ngIf="song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
         [@songSwitch]="songId"
         [fullscreen]="true"
         [header]="song.title"
@@ -39,10 +38,13 @@
         [text]="song.text"
         chordMode="hide"
       ></app-song-text>
+    }
+    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
       <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,8 +50,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
 
   public ngOnInit(): void {
     openFullscreen();
-    const currentShowId$ = this.globalSettingsService.get$
+    const currentShowId$ = this.globalSettingsService.get$.pipe(
-      .pipe(
       filter((settings): settings is NonNullable<typeof settings> => !!settings),
       map(settings => settings.currentShow),
       filter((showId): showId is string => !!showId),
@@ -60,8 +59,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
       takeUntil(this.destroy$)
     );
 
-    const show$ = currentShowId$
+    const show$ = currentShowId$.pipe(
-      .pipe(
       switchMap(showId => this.showService.read$(showId)),
       filter((show): show is Show => !!show),
       shareReplay({

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

@@ -1,10 +1,11 @@
-<div *ngIf="show" @fade>
+@if (show) {
+  <div @fade>
     <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
       [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
-
+      @if (!progress) {
-    <ng-container *ngIf="!progress">
         <div class="song">
-        <div *ngIf="show" class="song-parts">
+          @if (show) {
+            <div class="song-parts">
               <div
                 (click)="onSectionClick('title', -1, show.id)"
                 [class.active]="show.presentationSongId === 'title'"
@@ -20,10 +21,12 @@
                 <div class="head">Leer</div>
               </div>
             </div>
+          }
         </div>
-
+        @for (song of presentationSongs; track trackBy($index, song)) {
-      <div *ngFor="let song of presentationSongs; trackBy: trackBy" class="song">
+          <div class="song">
-        <div *ngIf="show"
+            @if (show) {
+              <div
                 [class.active]="show.presentationSongId === song.id"
                 class="title song-part"
                 >
@@ -31,10 +34,12 @@
                   {{ song.title }}
                 </div>
               </div>
-        <div *ngIf="show" class="song-parts">
+            }
+            @if (show) {
+              <div class="song-parts">
+                @for (section of song.sections; track section; let i = $index) {
                   <div
                     (click)="onSectionClick(song.id, i, show.id)"
-            *ngFor="let section of song.sections; index as i"
             [class.active]="
               show.presentationSongId === song.id &&
               show.presentationSection === i
@@ -46,11 +51,14 @@
                     </div>
                     <div class="fragment">{{ getFirstLine(section) }}</div>
                   </div>
+                }
               </div>
+            }
           </div>
-
+        }
         <div class="song">
-        <div *ngIf="show"
+          @if (show) {
+            <div
               [class.active]="show.presentationSongId === 'dynamicText'"
               class="title song-part"
               >
@@ -58,7 +66,7 @@
                 Freier Text
               </div>
             </div>
-
+          }
           <mat-form-field appearance="outline">
             <mat-label>Überschrift</mat-label>
             <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
@@ -66,24 +74,19 @@
               matInput
               type="text">
           </mat-form-field>
-
           <mat-form-field appearance="outline">
             <mat-label>Text</mat-label>
             <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
               autocomplete="off" id="dynamic-text"
             matInput></textarea>
           </mat-form-field>
-
         </div>
-
+        @if (show) {
-      <div *ngIf="show" class="div-bottom">
+          <div class="div-bottom">
-
             <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
               <fa-icon [icon]="faDesktop"></fa-icon>
               Präsentation starten
             </button>
-
-
             <mat-form-field appearance="outline">
               <mat-label>Hintergrund</mat-label>
               <mat-select
@@ -97,7 +100,6 @@
                 <mat-option value="bible">Bibel</mat-option>
               </mat-select>
             </mat-form-field>
-
             <mat-slider
               #slider
               [max]="100"
@@ -110,17 +112,17 @@
               [ngModel]="show.presentationZoom"
               matSliderThumb>
             </mat-slider>
-
-
           </div>
-
+        }
+        @if (show) {
           <app-add-song
-        *ngIf="show"
             [addedLive]="true"
             [showSongs]="showSongs"
             [show]="show"
             [songs]="songs$|async"
           ></app-add-song>
-    </ng-container>
+        }
+      }
     </app-card>
   </div>
+}

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

@@ -12,7 +12,7 @@ import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
 import {LineType} from '../../songs/services/line-type';
-import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
@@ -40,9 +40,7 @@ export interface PresentationSong {
   animations: [fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
     CardComponent,
-    NgFor,
     MatFormField,
     MatLabel,
     MatInput,

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

@@ -1,16 +1,25 @@
-<div *ngIf="shows$ | async as shows" @fade>
+@if (shows$ | async; as shows) {
-  <app-card *ngIf="visible" heading="Bitte eine Veranstaltung auswählen">
+  <div @fade>
-    <p *ngIf="!shows.length">
+    @if (visible) {
+      <app-card heading="Bitte eine Veranstaltung auswählen">
+        @if (!shows.length) {
+          <p>
             Es ist derzeit keine Veranstaltung vorhanden
           </p>
-
+        }
-    <div *ngIf="shows.length>0" class="list">
+        @if (shows.length>0) {
-      <button (click)="selectShow(show)" *ngFor="let show of shows" mat-stroked-button>
+          <div class="list">
+            @for (show of shows; track show) {
+              <button (click)="selectShow(show)" mat-stroked-button>
                 <app-user-name [userId]="show.owner"></app-user-name>
                 ,
                 {{ show.showType | showType }},
                 {{ show.date.toDate() | date: "dd.MM.yyyy" }}
               </button>
+            }
           </div>
+        }
       </app-card>
+    }
   </div>
+}

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

@@ -5,7 +5,7 @@ import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
-import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {MatButton} from '@angular/material/button';
 import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
@@ -16,7 +16,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
-  imports: [NgIf, CardComponent, NgFor, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
+  imports: [CardComponent, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class SelectComponent implements OnInit {
   public visible = false;

src/app/modules/shows/edit/edit.component.html

@@ -5,16 +5,20 @@
         <mat-label>Art der Veranstaltung</mat-label>
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
-            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+            @for (key of showTypePublic; track key) {
+              <mat-option [value]="key">{{
                 key | showType
                 }}
               </mat-option>
+            }
           </mat-optgroup>
           <mat-optgroup label="privat">
-            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+            @for (key of showTypePrivate; track key) {
+              <mat-option [value]="key">{{
                 key | showType
                 }}
               </mat-option>
+            }
           </mat-optgroup>
         </mat-select>
       </mat-form-field>

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

@@ -12,7 +12,7 @@ import {CardComponent} from '../../../widget-modules/components/card/card.compon
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
 import {MatOptgroup, MatOption} from '@angular/material/core';
-import {NgFor} from '@angular/common';
+
 import {MatInput} from '@angular/material/input';
 import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
@@ -30,7 +30,6 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
     MatLabel,
     MatSelect,
     MatOptgroup,
-    NgFor,
     MatOption,
     MatInput,
     MatDatepickerInput,

src/app/modules/shows/list/filter/filter.component.html

@@ -4,10 +4,12 @@
     <mat-form-field appearance="outline">
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
-        <mat-option *ngFor="let time of times" [value]="time.key">{{
+        @for (time of times; track time) {
+          <mat-option [value]="time.key">{{
             time.value
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -15,10 +17,12 @@
       <mat-label>Ersteller</mat-label>
       <mat-select formControlName="owner">
         <mat-option [value]="null">Alle</mat-option>
-        <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
+        @for (owner of owners; track owner) {
+          <mat-option [value]="owner.key">{{
             owner.value
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -27,16 +31,20 @@
       <mat-select formControlName="showType">
         <mat-option [value]="null">Alle</mat-option>
         <mat-optgroup label="öffentlich">
-          <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+          @for (key of showTypePublic; track key) {
+            <mat-option [value]="key">{{
               key | showType
               }}
             </mat-option>
+          }
         </mat-optgroup>
         <mat-optgroup label="privat">
-          <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+          @for (key of showTypePrivate; track key) {
+            <mat-option [value]="key">{{
               key | showType
               }}
             </mat-option>
+          }
         </mat-optgroup>
       </mat-select>
     </mat-form-field>

src/app/modules/shows/list/filter/filter.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {KeyValue, NgFor} from '@angular/common';
+import {KeyValue} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {FilterValues} from './filter-values';
@@ -19,7 +19,7 @@ import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translate
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, NgFor, MatOption, MatOptgroup, ShowTypePipe],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe],
 })
 export class FilterComponent {
   @Input() public route = '/shows/';

src/app/modules/shows/list/list-item/list-item.component.html

@@ -1,7 +1,9 @@
-<div *ngIf="show" class="list-item">
+@if (show) {
+  <div class="list-item">
     <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
     <div>
       <app-user-name [userId]="show.owner"></app-user-name>
     </div>
     <div>{{ show.showType | showType }}</div>
   </div>
+}

src/app/modules/shows/list/list-item/list-item.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {Show} from '../../services/show';
-import {DatePipe, NgIf} from '@angular/common';
+import {DatePipe} from '@angular/common';
 import {UserNameComponent} from '../../../../services/user/user-name/user-name.component';
 import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
@@ -8,7 +8,7 @@ import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translate
   selector: 'app-list-item',
   templateUrl: './list-item.component.html',
   styleUrls: ['./list-item.component.less'],
-  imports: [NgIf, UserNameComponent, DatePipe, ShowTypePipe],
+  imports: [UserNameComponent, DatePipe, ShowTypePipe],
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;

src/app/modules/shows/list/list.component.html

@@ -1,36 +1,42 @@
 <div>
   <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
   <app-list-header *appRole="['leader']">
-    <app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
+    @if (shows$ | async; as shows) {
+      <app-filter [shows]="publicShows$ | async"></app-filter>
+    }
   </app-list-header>
 
   <ng-container *appRole="['leader']">
-    <ng-container *ngIf="privateShows$ | async as shows">
+    @if (privateShows$ | async; as shows) {
+      @if (shows.length > 0) {
         <app-card
-        *ngIf="shows.length > 0"
           [padding]="false"
           heading="Meine Veranstaltungen"
           >
+          @for (show of shows | sortBy: 'desc':'date'; track show) {
             <app-list-item
-          *ngFor="let show of shows | sortBy: 'desc':'date'"
               [routerLink]="show.id"
               [show]="show"
             ></app-list-item>
+          }
         </app-card>
-    </ng-container>
+      }
+    }
   </ng-container>
 
-  <ng-container *ngIf="publicShows$ | async as shows">
+  @if (publicShows$ | async; as shows) {
+    @if (shows.length > 0) {
       <app-card
-      *ngIf="shows.length > 0"
         [padding]="false"
         heading="Veröffentlichte Veranstaltungen"
         >
+        @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
           <app-list-item
-        *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"
             [routerLink]="show.id"
             [show]="show"
           ></app-list-item>
+        }
       </app-card>
-  </ng-container>
+    }
+  }
 </div>

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

@@ -8,7 +8,7 @@ import {ActivatedRoute, RouterLink} from '@angular/router';
 import {map, switchMap} from 'rxjs/operators';
 import {RoleDirective} from '../../../services/user/role.directive';
 import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {FilterComponent} from './filter/filter.component';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {ListItemComponent} from './list-item/list-item.component';
@@ -19,7 +19,7 @@ import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.less'],
   animations: [fade],
-  imports: [RoleDirective, ListHeaderComponent, NgIf, FilterComponent, CardComponent, NgFor, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
+  imports: [RoleDirective, ListHeaderComponent, FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
 })
 export class ListComponent {
   public shows$ = this.showService.list$();
@@ -59,9 +59,7 @@ export class ListComponent {
     map(([queriedShows, fallbackShows, owner, showType]) => {
       const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
 
-      return shows
+      return shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType);
-        .filter(show => !owner || show.owner === owner)
-        .filter(show => !showType || show.showType === showType);
     })
   );
 

src/app/modules/shows/new/new.component.html

@@ -5,16 +5,20 @@
         <mat-label>Art der Veranstaltung</mat-label>
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
-            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+            @for (key of showTypePublic; track key) {
+              <mat-option [value]="key">{{
                 key | showType
                 }}
               </mat-option>
+            }
           </mat-optgroup>
           <mat-optgroup label="privat">
-            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+            @for (key of showTypePrivate; track key) {
+              <mat-option [value]="key">{{
                 key | showType
                 }}
               </mat-option>
+            }
           </mat-optgroup>
         </mat-select>
       </mat-form-field>

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

@@ -10,7 +10,7 @@ import {CardComponent} from '../../../widget-modules/components/card/card.compon
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
 import {MatOptgroup, MatOption} from '@angular/material/core';
-import {NgFor} from '@angular/common';
+
 import {MatInput} from '@angular/material/input';
 import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
@@ -28,7 +28,6 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
     MatLabel,
     MatSelect,
     MatOptgroup,
-    NgFor,
     MatOption,
     MatInput,
     MatDatepickerInput,

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

@@ -1,4 +1,5 @@
-<div *ngIf="show$ | async as show">
+@if (show$ | async; as show) {
+  <div>
     <app-card
       [fullscreen]="useSwiper"
       closeLink="../"
@@ -6,12 +7,16 @@
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
       >
-    <p *ngIf="!useSwiper">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
+      @if (!useSwiper) {
+        <p>{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
           <app-user-name [userId]="show.owner"></app-user-name>
         </p>
+      }
       <div class="head">
         <div>
-        <mat-checkbox *ngIf="!useSwiper" [(ngModel)]="showText">Text anzeigen</mat-checkbox>
+          @if (!useSwiper) {
+            <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
+          }
         </div>
         <div [class.floating]="useSwiper">
           <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
@@ -23,13 +28,15 @@
           matTooltip="Vollbild"></app-menu-button>
         </div>
       </div>
-    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
+      @if (showSongs && !useSwiper) {
+        <div (cdkDropListDropped)="drop($event, show)"
           [cdkDropListDisabled]="show.published || showText"
           [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
           [style.font-size]="textSize + 'em'"
           cdkDropList
           class="song-list">
-      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
+          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
+            <div cdkDrag class="song-row">
               <app-song
                 [fullscreen]="useSwiper"
                 [index]="i"
@@ -39,10 +46,13 @@
                 [show]="show"
               ></app-song>
             </div>
+          }
         </div>
-
+      }
-    <swiper-container *ngIf="useSwiper" scrollbar="true">
+      @if (useSwiper) {
-      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy"
+        <swiper-container scrollbar="true">
+          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
+            <swiper-slide
               [style.font-size]="textSize + 'em'"
               class="song-swipe">
               <app-song
@@ -54,45 +64,60 @@
                 [show]="show"
               ></app-song>
               <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
-        <div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
+              @if (getNextSong(orderedShowSongs(show), i); as next) {
+                <div class="next-song">{{ next }}
                   <fa-icon [icon]="faNextSong"></fa-icon>
                 </div>
+              }
             </swiper-slide>
+          }
         </swiper-container>
-
+      }
-    <ng-container *ngIf="songs$ | async as songs">
+      @if (songs$ | async; as songs) {
+        @if (songs && !show.published && !useSwiper) {
           <app-add-song
-        *ngIf="songs && !show.published && !useSwiper"
             [showSongs]="showSongs"
             [show]="show"
             [songs]="songs"
           ></app-add-song>
-    </ng-container>
+        }
-
+      }
-    <app-button-row *ngIf="!useSwiper">
+      @if (!useSwiper) {
+        <app-button-row>
           <ng-container *appRole="['leader']">
             <ng-container *appOwner="show.owner">
-          <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">
+              @if (!show.archived) {
+                <app-button (click)="onArchive(true)" [icon]="faBox">
                   Archivieren
                 </app-button>
-          <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">
+              }
+              @if (show.archived) {
+                <app-button (click)="onArchive(false)" [icon]="faBoxOpen">
                   Wiederherstellen
                 </app-button>
-          <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">
+              }
+              @if (!show.published) {
+                <app-button (click)="onPublish(true)" [icon]="faPublish">
                   Veröffentlichen
                 </app-button>
-          <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
+              }
+              @if (show.published) {
+                <app-button (click)="onPublish(false)" [icon]="faUnpublish">
                   Veröffentlichung zurückziehen
                 </app-button>
-          <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
+              }
+              @if (show.published) {
+                <app-button (click)="onShare(show)" [icon]="faShare">
                   Teilen
                 </app-button>
-          <app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
+              }
+              @if (!show.published) {
+                <app-button (click)="onChange(show.id)" [icon]="faSliders">
                   Ändern
                 </app-button>
+              }
             </ng-container>
           </ng-container>
-
           <app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
             Herunterladen
           </app-button>
@@ -105,5 +130,7 @@
             </app-button>
           </mat-menu>
         </app-button-row>
+      }
     </app-card>
   </div>
+}

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

@@ -32,7 +32,7 @@ import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.co
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
 import {GuestShowService} from '../../guest/guest-show.service';
 import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
-import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
 import {MatCheckbox} from '@angular/material/checkbox';
@@ -56,7 +56,6 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
   animations: [fade],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
-    NgIf,
     CardComponent,
     UserNameComponent,
     MatCheckbox,
@@ -65,7 +64,6 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
     MenuButtonComponent,
     MatTooltip,
     CdkDropList,
-    NgFor,
     CdkDrag,
     SongComponent,
     FaIconComponent,

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

@@ -1,27 +1,43 @@
-<div *ngIf="iSong && iSong && show">
+@if (iSong && iSong && show) {
-  <div *ngIf="show.published || fullscreen" class="title published">
+  <div>
+    @if (show.published || fullscreen) {
+      <div class="title published">
         <div class="key">{{ iSong.key }}</div>
         <div>{{ iSong.title }}</div>
       </div>
-
+    }
-  <div *ngIf="!show.published && !fullscreen" class="song">
+    @if (!show.published && !fullscreen) {
+      <div class="song">
         <span class="title">{{ iSong.title }}</span>
-    <span *ngIf="!edit" class="keys">
+        @if (!edit) {
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
+          <span class="keys">
+            @if (iSong.keyOriginal !== iSong.key) {
+              <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+              }<span
             (click)="openKeySelect()">{{ iSong.key }}</span>
-      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
+            @if (keys) {
+              <mat-form-field (click)="option.open()" class="transpose">
                 <mat-select #option [formControl]="keyFormControl">
-          <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
+                  @for (key of keys; track key) {
+                    <mat-option [value]="key">{{ key }}</mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
+            }
           </span>
-    <app-menu-button (click)="onEdit()" *ngIf="!edit" [icon]="faEdit" class="btn-edit btn-icon"
+        }
+        @if (!edit) {
+          <app-menu-button (click)="onEdit()" [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"
+        }
+        @if (!edit) {
+          <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
           matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+        }
       </div>
-
+    }
-  <mat-form-field *ngIf="edit" appearance="outline">
+    @if (edit) {
+      <mat-form-field appearance="outline">
         <mat-label>Songtext</mat-label>
         <textarea [cdkTextareaAutosize]="true"
           [formControl]="editSongControl"
@@ -30,18 +46,24 @@
           matTooltip="Tonart ändern"
         ></textarea>
       </mat-form-field>
-  <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
+    }
-  <app-button-row *ngIf="edit">
+    @if (edit) {
+      <div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
+    }
+    @if (edit) {
+      <app-button-row>
         <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
         <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
       </app-button-row>
-
+    }
+    @if (!edit && (showText )) {
       <app-song-text
         (chordModeChanged)="onChordModeChanged($event)"
-    *ngIf="!edit && (showText )"
         [chordMode]="iSong.chordMode"
         [showSwitch]="!show.published"
         [text]="iSong.text"
         [transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
       ></app-song-text>
+    }
   </div>
+}

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

@@ -8,7 +8,7 @@ import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
 import {MatSelect} from '@angular/material/select';
-import {NgFor, NgIf} from '@angular/common';
+
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatOption} from '@angular/material/core';
 import {MenuButtonComponent} from '../../../../widget-modules/components/menu-button/menu-button.component';
@@ -24,11 +24,9 @@ import {ButtonComponent} from '../../../../widget-modules/components/button/butt
   styleUrls: ['./song.component.less'],
   animations: [fade],
   imports: [
-    NgIf,
     MatFormField,
     MatSelect,
     ReactiveFormsModule,
-    NgFor,
     MatOption,
     MenuButtonComponent,
     MatTooltip,

src/app/modules/songs/services/transpose.service.spec.ts

@@ -52,9 +52,7 @@ describe('TransposeService', () => {
     const line: Line = {
       type: LineType.chord,
       text: '',
-      chords: [
+      chords: [{chord: 'Q', add: 'sus4', slashChord: null, position: 0, length: 1}],
-        {chord: 'Q', add: 'sus4', slashChord: null, position: 0, length: 1},
-      ],
     };
 
     const rendered = service.renderChords(line);
@@ -66,9 +64,7 @@ describe('TransposeService', () => {
     const line: Line = {
       type: LineType.chord,
       text: '',
-      chords: [
+      chords: [{chord: 'C', add: null, slashChord: 'Q', position: 0, length: 1}],
-        {chord: 'C', add: null, slashChord: 'Q', position: 0, length: 1},
-      ],
     };
 
     const rendered = service.renderChords(line);
@@ -80,9 +76,7 @@ describe('TransposeService', () => {
     const line: Line = {
       type: LineType.chord,
       text: '',
-      chords: [
+      chords: [{chord: 'C', add: null, slashChord: null, position: 120, length: 1}],
-        {chord: 'C', add: null, slashChord: null, position: 120, length: 1},
-      ],
     };
 
     const rendered = service.renderChords(line);

src/app/modules/songs/services/transpose.service.ts

@@ -111,7 +111,7 @@ export class TransposeService {
 
   private transposeChord(chord: Chord, map: TransposeMap): Chord {
     const translatedChord = map[chord.chord] ?? 'X';
-    const translatedSlashChord = chord.slashChord ? map[chord.slashChord] ?? 'X' : null;
+    const translatedSlashChord = chord.slashChord ? (map[chord.slashChord] ?? 'X') : null;
 
     return {
       ...chord,
@@ -147,7 +147,7 @@ export class TransposeService {
 
   private renderChord(chord: Chord): string {
     const renderedChord = scaleMapping[chord.chord] ?? 'X';
-    const renderedSlashChord = chord.slashChord ? scaleMapping[chord.slashChord] ?? 'X' : '';
+    const renderedSlashChord = chord.slashChord ? (scaleMapping[chord.slashChord] ?? 'X') : '';
 
     return renderedChord + (chord.add ?? '') + (renderedSlashChord ? '/' + renderedSlashChord : '');
   }

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

@@ -9,10 +9,12 @@
       <mat-label>Typ</mat-label>
       <mat-select formControlName="type">
         <mat-option [value]="null">- kein Filter -</mat-option>
-        <mat-option *ngFor="let type of types" [value]="type">{{
+        @for (type of types; track type) {
+          <mat-option [value]="type">{{
             type | songType
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -20,10 +22,12 @@
       <mat-label>Tonart</mat-label>
       <mat-select formControlName="key">
         <mat-option [value]="null">- kein Filter -</mat-option>
-        <mat-option *ngFor="let key of keys" [value]="key">{{
+        @for (key of keys; track key) {
+          <mat-option [value]="key">{{
             key | key
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -31,10 +35,12 @@
       <mat-label>Rechtlicher Status</mat-label>
       <mat-select formControlName="legalType">
         <mat-option [value]="null">- kein Filter -</mat-option>
-        <mat-option *ngFor="let key of legalType" [value]="key">{{
+        @for (key of legalType; track key) {
+          <mat-option [value]="key">{{
             key | legalType
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -42,10 +48,12 @@
       <mat-label>Attribute</mat-label>
       <mat-select formControlName="flag">
         <mat-option [value]="null">- kein Filter -</mat-option>
-        <mat-option *ngFor="let flag of getFlags()" [value]="flag">{{
+        @for (flag of getFlags(); track flag) {
+          <mat-option [value]="flag">{{
             flag
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>

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

@@ -9,7 +9,7 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {MatSelect} from '@angular/material/select';
 import {MatOption} from '@angular/material/core';
-import {NgFor} from '@angular/common';
+
 import {LegalTypePipe} from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
 import {KeyPipe} from '../../../../widget-modules/pipes/key-translator/key.pipe';
 import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
@@ -18,7 +18,7 @@ import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translate
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatSelect, MatOption, NgFor, LegalTypePipe, KeyPipe, SongTypePipe],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatSelect, MatOption, LegalTypePipe, KeyPipe, SongTypePipe],
 })
 export class FilterComponent {
   public filterFormGroup: UntypedFormGroup;

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

@@ -1,30 +1,40 @@
-<div *ngIf="songs$ | async as songs">
+@if (songs$ | async; as songs) {
+  <div>
     <app-list-header [anyFilterActive]="anyFilterActive">
       <app-filter [songs]="songs" route="songs"></app-filter>
     </app-list-header>
-
     <app-card [padding]="false">
-    <div *ngFor="let song of songs; trackBy: trackBy" [routerLink]="song.id" class="list-item">
+      @for (song of songs; track trackBy($index, song)) {
+        <div [routerLink]="song.id" class="list-item">
           <div class="number">{{ song.number }}</div>
           <div>{{ song.title }}</div>
           <div>
             <ng-container *appRole="['contributor']">
-          <div *ngIf="song.status === 'draft'" class="warning">
+              @if (song.status === 'draft') {
+                <div class="warning">
                   <fa-icon [icon]="faDraft"></fa-icon>
                 </div>
-          <div *ngIf="song.status === 'set'" class="neutral">
+              }
+              @if (song.status === 'set') {
+                <div class="neutral">
                   <fa-icon [icon]="faDraft"></fa-icon>
                 </div>
-          <div *ngIf="song.status === 'final'" class="success">
+              }
+              @if (song.status === 'final') {
+                <div class="success">
                   <fa-icon [icon]="faFinal"></fa-icon>
                 </div>
+              }
             </ng-container>
-        <div *ngIf="song.legalType === 'open'" class="warning">
+            @if (song.legalType === 'open') {
+              <div class="warning">
                 <fa-icon [icon]="faLegal"></fa-icon>
               </div>
+            }
           </div>
           <div>{{ song.key }}</div>
         </div>
-
+      }
     </app-card>
   </div>
+}

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

@@ -9,7 +9,7 @@ import {filterSong} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
 import {ScrollService} from '../../../services/scroll.service';
 import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
 import {FilterComponent} from './filter/filter.component';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
@@ -22,7 +22,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
   styleUrls: ['./song-list.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
-  imports: [NgIf, ListHeaderComponent, FilterComponent, CardComponent, NgFor, RouterLink, RoleDirective, FaIconComponent, AsyncPipe],
+  imports: [ListHeaderComponent, FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe],
 })
 export class SongListComponent implements OnInit, OnDestroy {
   public anyFilterActive = false;

src/app/modules/songs/song/edit/edit-file/edit-file.component.html

@@ -1,5 +1,6 @@
 <app-card heading="Angehängte Dateien">
-  <div *ngIf="currentUpload">
+  @if (currentUpload) {
+    <div>
       <div class="progress">
         <div
           [ngStyle]="{ width: currentUpload?.progress + '%' }"
@@ -9,6 +10,7 @@
       Progress: {{ currentUpload?.name }} | {{ currentUpload?.progress }}%
       Complete
     </div>
+  }
   <div class="upload">
     <label>
       <input (change)="detectFiles($event)" type="file" />
@@ -23,7 +25,9 @@
     </button>
   </div>
 
-  <p *ngFor="let file of files$ | async">
+  @for (file of files$ | async; track file) {
+    <p>
       <app-file [file]="file" [songId]="songId"></app-file>
     </p>
+  }
 </app-card>

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -7,7 +7,7 @@ import {FileDataService} from '../../../services/file-data.service';
 import {Observable} from 'rxjs';
 import {File} from '../../../services/file';
 import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
-import {AsyncPipe, NgFor, NgIf, NgStyle} from '@angular/common';
+import {AsyncPipe, NgStyle} from '@angular/common';
 import {MatIconButton} from '@angular/material/button';
 import {MatIcon} from '@angular/material/icon';
 import {FileComponent} from './file/file.component';
@@ -16,7 +16,7 @@ import {FileComponent} from './file/file.component';
   selector: 'app-edit-file',
   templateUrl: './edit-file.component.html',
   styleUrls: ['./edit-file.component.less'],
-  imports: [CardComponent, NgIf, NgStyle, MatIconButton, MatIcon, NgFor, FileComponent, AsyncPipe],
+  imports: [CardComponent, NgStyle, MatIconButton, MatIcon, FileComponent, AsyncPipe],
 })
 export class EditFileComponent {
   public selectedFiles: FileList | null = null;

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -1,27 +1,31 @@
-<app-card *ngIf="song" [heading]="song.number + ' bearbeiten'" closeLink="../">
+@if (song) {
+  <app-card [heading]="song.number + ' bearbeiten'" closeLink="../">
     <form [formGroup]="form" class="form">
       <mat-form-field appearance="outline">
         <mat-label>Titel</mat-label>
         <input formControlName="title" matInput />
       </mat-form-field>
-
       <div class="fourth">
         <mat-form-field appearance="outline">
           <mat-label>Typ</mat-label>
           <mat-select formControlName="type">
-          <mat-option *ngFor="let type of types" [value]="type">{{
+            @for (type of types; track type) {
+              <mat-option [value]="type">{{
                 type | songType
                 }}
               </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>Tonart</mat-label>
           <mat-select formControlName="key">
-          <mat-option *ngFor="let key of keys" [value]="key">{{
+            @for (key of keys; track key) {
+              <mat-option [value]="key">{{
                 key | key
                 }}
               </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field appearance="outline">
@@ -31,14 +35,15 @@
         <mat-form-field appearance="outline">
           <mat-label>Status</mat-label>
           <mat-select formControlName="status">
-          <mat-option *ngFor="let status of status" [value]="status">{{
+            @for (status of status; track status) {
+              <mat-option [value]="status">{{
                 status | status
                 }}
               </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
-
       <mat-form-field appearance="outline">
         <mat-label>Songtext</mat-label>
         <textarea
@@ -49,7 +54,8 @@
           matInput
         ></textarea>
       </mat-form-field>
-    <div *ngIf="songtextFocus" class="song-text-help">
+      @if (songtextFocus) {
+        <div class="song-text-help">
           <h3>Vorschau</h3>
           <app-song-text [text]="form.value.text" chordMode="show"></app-song-text>
           <h3>Hinweise zur Bearbeitung</h3>
@@ -59,10 +65,8 @@
           <pre>
             Strophe
             Text der ersten Strophe
-
             Strophe
             Text der zweiten Strophe
-
             Refrain
             Und hier der Refrain
           </pre>
@@ -87,7 +91,7 @@
             sed diam nonumy eirmod tempor invidunt ut labore et dolore
           </pre>
         </div>
-
+      }
       <mat-form-field appearance="outline">
         <mat-label>Kommentar</mat-label>
         <textarea
@@ -96,17 +100,17 @@
           matInput
         ></textarea>
       </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-chip-grid #chipList>
+          @for (flag of flags; track flag) {
             <mat-chip-row
               (removed)="removeFlag(flag)"
-          *ngFor="let flag of flags"
               [removable]="true"
               >
               {{ flag }}&nbsp;
               <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
             </mat-chip-row>
+          }
           <input
             (matChipInputTokenEnd)="addFlag($event)"
             [matChipInputAddOnBlur]="true"
@@ -116,33 +120,34 @@
             />
         </mat-chip-grid>
       </mat-form-field>
-
       <div class="half">
         <mat-form-field appearance="outline">
           <mat-label>Rechtlicher Status</mat-label>
           <mat-select formControlName="legalType">
-          <mat-option *ngFor="let key of legalType" [value]="key">{{
+            @for (key of legalType; track key) {
+              <mat-option [value]="key">{{
                 key | legalType
                 }}
               </mat-option>
+            }
           </mat-select>
         </mat-form-field>
-
         <mat-form-field appearance="outline">
           <mat-label>Rechteinhaber</mat-label>
           <mat-select formControlName="legalOwner">
-          <mat-option *ngFor="let key of legalOwner" [value]="key">{{
+            @for (key of legalOwner; track key) {
+              <mat-option [value]="key">{{
                 key | legalOwner
                 }}
               </mat-option>
+            }
           </mat-select>
         </mat-form-field>
-
         <mat-form-field appearance="outline">
           <mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
           <input formControlName="legalOwnerId" matInput />
+          @if (form.value.legalOwner === 'CCLI') {
             <a
-          *ngIf="form.value.legalOwner === 'CCLI'"
               class="link-ccli"
               href="https://songselect.ccli.com/Songs/{{ form.value.legalOwnerId }}"
               matSuffix
@@ -154,31 +159,28 @@
               >
               <fa-icon [icon]="faLink"></fa-icon>
             </a>
+          }
         </mat-form-field>
-
         <mat-form-field appearance="outline">
           <mat-label>Künstler</mat-label>
           <input formControlName="artist" matInput />
         </mat-form-field>
-
         <mat-form-field appearance="outline">
           <mat-label>Verlag / Copyright</mat-label>
           <input formControlName="label" matInput />
         </mat-form-field>
-
         <mat-form-field appearance="outline">
           <mat-label>Nutzungsbedingungen</mat-label>
           <input formControlName="termsOfUse" matInput />
         </mat-form-field>
-
         <mat-form-field appearance="outline">
           <mat-label>abweichende Quelle</mat-label>
           <input formControlName="origin" matInput />
         </mat-form-field>
       </div>
     </form>
-
     <app-button-row>
       <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
     </app-button-row>
   </app-card>
+}

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -11,7 +11,7 @@ import {MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRow} from '@angular
 import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
 import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
-import {NgFor, NgIf} from '@angular/common';
+
 import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
@@ -34,14 +34,12 @@ import {StatusPipe} from '../../../../../widget-modules/pipes/status-translater/
   templateUrl: './edit-song.component.html',
   styleUrls: ['./edit-song.component.less'],
   imports: [
-    NgIf,
     CardComponent,
     ReactiveFormsModule,
     MatFormField,
     MatLabel,
     MatInput,
     MatSelect,
-    NgFor,
     MatOption,
     CdkTextareaAutosize,
     SongTextComponent,

src/app/modules/songs/song/edit/history/history.component.html

@@ -1,6 +1,10 @@
-<app-card *ngIf="song && song.edits" heading="letzte Änderungen">
+@if (song && song.edits) {
-  <div *ngFor="let edit of song.edits" class="list">
+  <app-card heading="letzte Änderungen">
+    @for (edit of song.edits; track edit) {
+      <div class="list">
         <div>{{ edit.username }}</div>
         <div>{{ edit.timestamp.toDate() | date: "dd.MM.yyyy" }}</div>
       </div>
+    }
   </app-card>
+}

src/app/modules/songs/song/edit/history/history.component.ts

@@ -3,14 +3,14 @@ import {first, map, switchMap} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {Song} from '../../../services/song';
-import {DatePipe, NgFor, NgIf} from '@angular/common';
+import {DatePipe} from '@angular/common';
 import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
 
 @Component({
   selector: 'app-history',
   templateUrl: './history.component.html',
   styleUrls: ['./history.component.less'],
-  imports: [NgIf, CardComponent, NgFor, DatePipe],
+  imports: [CardComponent, DatePipe],
 })
 export class HistoryComponent implements OnInit {
   public song: Song | null = null;

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

@@ -1,6 +1,6 @@
 <div class="split">
+  @if (song$ | async; as song) {
     <app-card
-    *ngIf="song$ | async as song"
       [heading]="song.number + ' - ' + song.title"
       closeLink="../"
       >
@@ -11,10 +11,13 @@
             <div>Tonart: {{ song.key }}</div>
             <div>Tempo: {{ song.tempo }}</div>
             <div>Status: {{ (song.status | status) || "entwurf" }}</div>
-          <div *ngIf="song.legalOwner">
+            @if (song.legalOwner) {
+              <div>
                 Rechteinhaber: {{ song.legalOwner | legalOwner }}
               </div>
-          <div *ngIf="song.legalOwnerId && song.legalOwner === 'CCLI'">
+            }
+            @if (song.legalOwnerId && song.legalOwner === 'CCLI') {
+              <div>
                 <a
                   href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}"
                   target="_blank"
@@ -22,38 +25,46 @@
                   CCLI Nummer: {{ song.legalOwnerId }}
                 </a>
               </div>
-          <div *ngIf="song.legalOwnerId && song.legalOwner !== 'CCLI'">
+            }
+            @if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
+              <div>
                 Rechteinhaber ID: {{ song.legalOwnerId }}
               </div>
-          <div *ngIf="song.artist">Künstler: {{ song.artist }}</div>
+            }
-          <div *ngIf="song.label">Verlag: {{ song.label }}</div>
+            @if (song.artist) {
-          <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
+              <div>Künstler: {{ song.artist }}</div>
+            }
+            @if (song.label) {
+              <div>Verlag: {{ song.label }}</div>
+            }
+            @if (song.origin) {
+              <div>Quelle: {{ song.origin }}</div>
+            }
             <div>Wie oft verwendet: {{ songCount$ | async }}</div>
           </div>
         </div>
-
+        @if (user$ | async; as user) {
           <app-song-text
-        *ngIf="user$ | async as user"
             [chordMode]="user.chordMode"
             [showSwitch]="true"
             [text]="song.text"
           ></app-song-text>
-
+        }
         <mat-chip-listbox
           *appRole="['leader', 'contributor']"
           aria-label="Attribute"
           >
-        <mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
+          @for (flag of getFlags(song.flags); track flag) {
+            <mat-chip-option>{{
               flag
               }}
             </mat-chip-option>
+          }
         </mat-chip-listbox>
-
         <div *appRole="['leader', 'contributor']" class="text">
           {{ song.comment }}
         </div>
       </div>
-
       <app-button-row>
         <app-button
           (click)="onDelete(song.id)"
@@ -69,18 +80,25 @@
             Zu Veranstaltung hinzufügen
           </app-button>
           <mat-menu #menu="matMenu">
-          <app-button (click)="addSongToShow(show, song)" *ngFor="let show of privateShows$|async">
+            @for (show of privateShows$|async; track show) {
+              <app-button (click)="addSongToShow(show, song)">
                 {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
               </app-button>
+            }
           </mat-menu>
         </ng-container>
       </app-button-row>
     </app-card>
-  <ng-container *ngIf="files$ | async as files">
+  }
-    <app-card *ngIf="files.length > 0" heading="Anhänge">
+  @if (files$ | async; as files) {
-      <p *ngFor="let file of files$ | async">
+    @if (files.length > 0) {
+      <app-card heading="Anhänge">
+        @for (file of files$ | async; track file) {
+          <p>
             <app-file [file]="file"></app-file>
           </p>
+        }
       </app-card>
-  </ng-container>
+    }
+  }
 </div>

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

@@ -12,7 +12,7 @@ import {faEdit, faFileCirclePlus, faTrash} from '@fortawesome/free-solid-svg-ico
 import {ShowService} from '../../shows/services/show.service';
 import {Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
-import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {RoleDirective} from '../../../services/user/role.directive';
 import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
@@ -31,12 +31,10 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
   imports: [
-    NgIf,
     CardComponent,
     RoleDirective,
     SongTextComponent,
     MatChipListbox,
-    NgFor,
     MatChipOption,
     ButtonRowComponent,
     ButtonComponent,

src/app/modules/user/info/info.component.html

@@ -1,12 +1,14 @@
-<app-card *ngIf="user$ | async as user" heading="Hallo {{ user.name }}">
+@if (user$ | async; as user) {
+  <app-card heading="Hallo {{ user.name }}">
     <p>
-    <span *ngIf="getUserRoles(user.role).length === 0" class="warn"
+      @if (getUserRoles(user.role).length === 0) {
+        <span class="warn"
           >Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den
           Administrator!</span
           >
+        }
         <span>{{ transdormUserRoles(user.role) }}</span>
       </p>
-
       <mat-form-field appearance="outline">
         <mat-label>bevorzugte Anzeige der Akkorde</mat-label>
         <mat-select
@@ -25,10 +27,10 @@
           werden.
         </mat-hint>
       </mat-form-field>
-
       <app-button-row>
         <app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
       </app-button-row>
     </app-card>
+  }
 
   <app-users *appRole="['admin']"></app-users>

src/app/modules/user/info/info.component.ts

@@ -6,7 +6,7 @@ import {ChordMode} from '../../../widget-modules/components/song-text/song-text.
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {RolePipe} from './role.pipe';
 import {roles} from '../../../services/user/roles';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {MatFormField, MatHint, MatLabel} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
@@ -23,7 +23,6 @@ import {UsersComponent} from './users/users.component';
   templateUrl: './info.component.html',
   styleUrls: ['./info.component.less'],
   imports: [
-    NgIf,
     CardComponent,
     MatFormField,
     MatLabel,

src/app/modules/user/info/users/user/user.component.html

@@ -1,9 +1,9 @@
-<div *ngIf="edit" class="users">
+@if (edit) {
+  <div class="users">
     <mat-form-field appearance="outline">
       <mat-label>Name</mat-label>
       <input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput />
     </mat-form-field>
-
     <mat-form-field appearance="outline">
       <mat-label>Rolle</mat-label>
       <mat-select
@@ -11,21 +11,27 @@
         [ngModel]="roles"
         multiple
         >
-      <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{
+        @for (role of ROLE_TYPES; track role) {
+          <mat-option [value]="role">{{
             role | role
             }}
           </mat-option>
+        }
       </mat-select>
     </mat-form-field>
-
     <button (click)="edit = false" mat-icon-button>
       <fa-icon [icon]="faClose"></fa-icon>
     </button>
   </div>
+}
 
-<div (click)="edit = true" *ngIf="!edit" class="users list-item">
+@if (!edit) {
+  <div (click)="edit = true" class="users list-item">
     <span>{{ name }}</span>
     <span
-  ><span *ngFor="let role of roles">{{ role | role }}, </span></span
+      >@for (role of roles; track role) {
+      <span>{{ role | role }}, </span>
+      }</span
       >
     </div>
+  }

src/app/modules/user/info/users/user/user.component.ts

@@ -3,7 +3,7 @@ import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
-import {NgFor, NgIf} from '@angular/common';
+
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -17,7 +17,7 @@ import {RolePipe} from '../../role.pipe';
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.less'],
-  imports: [NgIf, MatFormField, MatLabel, MatInput, ReactiveFormsModule, FormsModule, MatSelect, NgFor, MatOption, MatIconButton, FaIconComponent, RolePipe],
+  imports: [MatFormField, MatLabel, MatInput, ReactiveFormsModule, FormsModule, MatSelect, MatOption, MatIconButton, FaIconComponent, RolePipe],
 })
 export class UserComponent {
   public id = '';

src/app/modules/user/info/users/users.component.html

@@ -1,3 +1,5 @@
 <app-card heading="registrierte Benutzer">
-  <app-user *ngFor="let user of users$ | async | sortBy: 'asc':'name'" [user]="user"></app-user>
+  @for (user of users$ | async | sortBy: 'asc':'name'; track user) {
+    <app-user [user]="user"></app-user>
+  }
 </app-card>

src/app/modules/user/info/users/users.component.ts

@@ -3,7 +3,7 @@ import {UserService} from '../../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../../services/user/user';
 import {CardComponent} from '../../../../widget-modules/components/card/card.component';
-import {AsyncPipe, NgFor} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {UserComponent} from './user/user.component';
 import {SortByPipe} from '../../../../widget-modules/pipes/sort-by/sort-by.pipe';
 
@@ -11,7 +11,7 @@ import {SortByPipe} from '../../../../widget-modules/pipes/sort-by/sort-by.pipe'
   selector: 'app-users',
   templateUrl: './users.component.html',
   styleUrls: ['./users.component.less'],
-  imports: [CardComponent, NgFor, UserComponent, AsyncPipe, SortByPipe],
+  imports: [CardComponent, UserComponent, AsyncPipe, SortByPipe],
 })
 export class UsersComponent {
   public users$: Observable<User[]>;

src/app/modules/user/login/login.component.html

@@ -16,7 +16,9 @@
           type="password"
           />
       </mat-form-field>
-      <p *ngIf="errorMessage" class="error">{{ errorMessage | authMessage }}</p>
+      @if (errorMessage) {
+        <p class="error">{{ errorMessage | authMessage }}</p>
+      }
       <button
         (click)="onLogin()"
         class="btn-login"

src/app/modules/user/login/login.component.ts

@@ -6,7 +6,7 @@ import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
 import {LogoComponent} from '../../../widget-modules/components/logo/logo.component';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
-import {NgIf} from '@angular/common';
+
 import {MatButton} from '@angular/material/button';
 import {AuthMessagePipe} from './auth-message.pipe';
 
@@ -14,7 +14,7 @@ import {AuthMessagePipe} from './auth-message.pipe';
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.less'],
-  imports: [LogoComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, NgIf, MatButton, RouterLink, AuthMessagePipe],
+  imports: [LogoComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatButton, RouterLink, AuthMessagePipe],
 })
 export class LoginComponent implements OnInit {
   public form: UntypedFormGroup = new UntypedFormGroup({

src/app/modules/user/password/password.component.html

@@ -13,7 +13,9 @@
       <app-button (click)="onResetPassword()" [icon]="faNewPassword"
         >neues Passwort anfordern
       </app-button>
-      <p *ngIf="errorMessage" class="error">{{ errorMessage | authMessage }}</p>
+      @if (errorMessage) {
+        <p class="error">{{ errorMessage | authMessage }}</p>
+      }
     </app-button-row>
   </div>
 </app-card>

src/app/modules/user/password/password.component.ts

@@ -8,14 +8,14 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
-import {NgIf} from '@angular/common';
+
 import {AuthMessagePipe} from '../login/auth-message.pipe';
 
 @Component({
   selector: 'app-password',
   templateUrl: './password.component.html',
   styleUrls: ['./password.component.less'],
-  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, NgIf, AuthMessagePipe],
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, AuthMessagePipe],
 })
 export class PasswordComponent implements OnInit {
   public form: UntypedFormGroup = new UntypedFormGroup({

src/app/widget-modules/components/add-song/add-song.component.html

@@ -1,11 +1,15 @@
-<div *ngIf="songs" class="add-row">
+@if (songs) {
+  <div class="add-row">
     <mat-form-field appearance="outline">
       <mat-label>Lied hinzufügen...</mat-label>
       <mat-select (selectionChange)="onAddSongSelectionChanged($event)">
         <mat-option>
           <ngx-mat-select-search [formControl]="filteredSongsControl"></ngx-mat-select-search>
         </mat-option>
-      <mat-option *ngFor="let song of filteredSongs()" [value]="song.id">{{ song.title }}</mat-option>
+        @for (song of filteredSongs(); track song) {
+          <mat-option [value]="song.id">{{ song.title }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   </div>
+}

src/app/widget-modules/components/add-song/add-song.component.ts

@@ -7,7 +7,7 @@ import {ShowSong} from '../../../modules/shows/services/show-song';
 import {ShowSongService} from '../../../modules/shows/services/show-song.service';
 import {Show} from '../../../modules/shows/services/show';
 import {ShowService} from '../../../modules/shows/services/show.service';
-import {NgForOf, NgIf} from '@angular/common';
+
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 
 @Component({
@@ -15,7 +15,7 @@ import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
   templateUrl: './add-song.component.html',
   styleUrls: ['./add-song.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatFormField, MatSelect, MatOption, MatLabel, NgxMatSelectSearchModule, ReactiveFormsModule, NgForOf],
+  imports: [MatFormField, MatSelect, MatOption, MatLabel, NgxMatSelectSearchModule, ReactiveFormsModule],
 })
 export class AddSongComponent {
   @Input() public songs: Song[] | null = null;

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

@@ -1,7 +1,9 @@
 <button mat-button>
-  <span *ngIf="icon"
+  @if (icon) {
+    <span
       ><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span
       >
+    }
     <span class="button-content">
       <ng-content></ng-content>
     </span>

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

@@ -1,14 +1,14 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
 import {MatButton} from '@angular/material/button';
-import {NgIf} from '@angular/common';
+
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 
 @Component({
   selector: 'app-button',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.less'],
-  imports: [MatButton, NgIf, FaIconComponent],
+  imports: [MatButton, FaIconComponent],
 })
 export class ButtonComponent {
   @Input() public icon: IconProp | null = null;

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

@@ -1,13 +1,18 @@
 <div [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
+  @if (closeLink && !fullscreen) {
     <button
-    *ngIf="closeLink && !fullscreen"
       [routerLink]="closeLink"
       class="btn-close"
       mat-icon-button
       >
       <fa-icon [icon]="closeIcon"></fa-icon>
     </button>
-  <div *ngIf="heading && !fullscreen" class="heading">{{ heading }}</div>
+  }
-  <div *ngIf="subheading && !fullscreen" class="subheading">{{ subheading }}</div>
+  @if (heading && !fullscreen) {
+    <div class="heading">{{ heading }}</div>
+  }
+  @if (subheading && !fullscreen) {
+    <div class="subheading">{{ subheading }}</div>
+  }
   <ng-content></ng-content>
 </div>

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

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
-import {NgIf} from '@angular/common';
+
 import {MatIconButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
@@ -9,7 +9,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
   selector: 'app-card',
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.less'],
-  imports: [NgIf, MatIconButton, RouterLink, FaIconComponent],
+  imports: [MatIconButton, RouterLink, FaIconComponent],
 })
 export class CardComponent {
   @Input() public padding = true;

src/app/widget-modules/components/list-header/list-header.component.html

@@ -11,8 +11,10 @@
   </button>
 </div>
 
-<div *ngIf="filterVisible || anyFilterActive" @fade>
+@if (filterVisible || anyFilterActive) {
+  <div @fade>
     <app-card>
       <ng-content></ng-content>
     </app-card>
   </div>
+}

src/app/widget-modules/components/list-header/list-header.component.ts

@@ -4,7 +4,7 @@ import {fade} from '../../../animations';
 import {MatIconButton} from '@angular/material/button';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {RouterLink} from '@angular/router';
-import {NgIf} from '@angular/common';
+
 import {CardComponent} from '../card/card.component';
 
 @Component({
@@ -12,7 +12,7 @@ import {CardComponent} from '../card/card.component';
   templateUrl: './list-header.component.html',
   styleUrls: ['./list-header.component.less'],
   animations: [fade],
-  imports: [MatIconButton, FaIconComponent, RouterLink, NgIf, CardComponent],
+  imports: [MatIconButton, FaIconComponent, RouterLink, CardComponent],
 })
 export class ListHeaderComponent {
   public faNew = faPlus;

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,75 +1,83 @@
+@if (sections && !fullscreen) {
   <div
     (click)="onClick()"
-  *ngIf="sections && !fullscreen"
     [class.chords]="iChordMode !== 'hide'"
     class="song-text"
     >
+    @if (showSwitch) {
       <button
         (click)="onChordClick()"
-    *ngIf="showSwitch"
         class="menu"
         mat-icon-button
         >
         <fa-icon [icon]="faLines"></fa-icon>
       </button>
-
+    }
     <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
+      @for (section of sections; track section; let i = $index) {
         <div
           #section
-      *ngFor="let section of sections; let i = index"
           [class.chorus]="section.type === 1"
           class="section"
           >
+          @for (line of getLines(section); track line) {
             <div
-        *ngFor="let line of getLines(section)"
               [class.chord]="line.type === 0"
               [class.comment]="isComment(line.text)"
               [class.disabled]="checkDisabled(i)"
               class="line"
               >{{ transform(line.text) }}
             </div>
+          }
         </div>
-    <div *ngIf="sections.length===0" class="error">
+      }
+      @if (sections.length===0) {
+        <div class="error">
           Es wurden keine Liedabschnitte gefunden! Bitte mindestens einen Abschnitt festlegen!
         </div>
+      }
     </div>
-
     <ng-content></ng-content>
   </div>
+}
 
+@if (sections && fullscreen) {
   <div
     (click)="onClick()"
-  *ngIf="sections && fullscreen"
     [@songSwitch]="sections"
     [class.chords]="iChordMode !== 'hide'"
     class="song-text"
     >
+    @if (showSwitch) {
       <button
         (click)="onChordClick()"
-    *ngIf="showSwitch"
         class="menu"
         mat-icon-button
         >
         <fa-icon [icon]="faLines"></fa-icon>
       </button>
-
+    }
     <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-    <h1 *ngIf="header">{{ header }}</h1>
+      @if (header) {
+        <h1>{{ header }}</h1>
+      }
+      @for (section of sections; track section; let i = $index) {
         <div
           #section
-      *ngFor="let section of sections; let i = index"
           [class.chorus]="section.type === 1"
           class="section"
           >
+          @for (line of getLines(section); track line) {
             <div
-        *ngFor="let line of getLines(section)"
               [class.chord]="line.type === 0"
               [class.disabled]="checkDisabled(i)"
               class="line"
               >{{ line.text.trim() }}
             </div>
+          }
         </div>
+      }
     </div>
-
     <ng-content></ng-content>
   </div>
+}

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -7,7 +7,7 @@ import {SectionType} from '../../../modules/songs/services/section-type';
 import {LineType} from '../../../modules/songs/services/line-type';
 import {Section} from '../../../modules/songs/services/section';
 import {Line} from '../../../modules/songs/services/line';
-import {NgForOf, NgIf} from '@angular/common';
+
 import {MatIconButton} from '@angular/material/button';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 
@@ -18,7 +18,7 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst';
   templateUrl: './song-text.component.html',
   styleUrls: ['./song-text.component.less'],
   animations: [songSwitch],
-  imports: [NgIf, MatIconButton, FaIconComponent, NgForOf],
+  imports: [MatIconButton, FaIconComponent],
 })
 export class SongTextComponent implements OnInit {
   public sections: Section[] = [];

src/main.ts

@@ -1,4 +1,4 @@
-import {enableProdMode, importProvidersFrom} from '@angular/core';
+import {enableProdMode, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
 
 import {environment} from './environments/environment';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
@@ -28,6 +28,7 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideZoneChangeDetection(),
     importProvidersFrom(
       BrowserModule,
       AppRoutingModule,

tsconfig.json

@@ -8,17 +8,11 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "module": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "strict": false,
-    "typeRoots": [
+    "typeRoots": ["node_modules/@types"],
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ],
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {