migrate angular 21

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-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-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-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-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-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-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">
-  <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
-  <div>
-    <app-user-name [userId]="show.owner"></app-user-name>
+@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>
-  <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">
-      <app-card
-        *ngIf="shows.length > 0"
-        [padding]="false"
-        heading="Meine Veranstaltungen"
-      >
-        <app-list-item
-          *ngFor="let show of shows | sortBy: 'desc':'date'"
-          [routerLink]="show.id"
-          [show]="show"
-        ></app-list-item>
-      </app-card>
-    </ng-container>
+    @if (privateShows$ | async; as shows) {
+      @if (shows.length > 0) {
+        <app-card
+          [padding]="false"
+          heading="Meine Veranstaltungen"
+          >
+          @for (show of shows | sortBy: 'desc':'date'; track show) {
+            <app-list-item
+              [routerLink]="show.id"
+              [show]="show"
+            ></app-list-item>
+          }
+        </app-card>
+      }
+    }
   </ng-container>
 
-  <ng-container *ngIf="publicShows$ | async as shows">
-    <app-card
-      *ngIf="shows.length > 0"
-      [padding]="false"
-      heading="Veröffentlichte Veranstaltungen"
-    >
-      <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>
+  @if (publicShows$ | async; as shows) {
+    @if (shows.length > 0) {
+      <app-card
+        [padding]="false"
+        heading="Veröffentlichte Veranstaltungen"
+        >
+        @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
+          <app-list-item
+            [routerLink]="show.id"
+            [show]="show"
+          ></app-list-item>
+        }
+      </app-card>
+    }
+  }
 </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
-        .filter(show => !owner || show.owner === owner)
-        .filter(show => !showType || show.showType === showType);
+      return shows.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-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-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,109 +1,136 @@
-<div *ngIf="show$ | async as show">
-  <app-card
-    [fullscreen]="useSwiper"
-    closeLink="../"
+@if (show$ | async; as show) {
+  <div>
+    <app-card
+      [fullscreen]="useSwiper"
+      closeLink="../"
     heading="{{ show.showType | showType }}, {{
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
-  >
-    <p *ngIf="!useSwiper">{{ 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>
-      </div>
-      <div [class.floating]="useSwiper">
-        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
-                         matTooltip="Verkleinern"></app-menu-button>
-        <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
-                         matTooltip="Vergrößern"></app-menu-button>
-        <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
-                         [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
-                         matTooltip="Vollbild"></app-menu-button>
-      </div>
-    </div>
-    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
-         [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">
-        <app-song
-          [fullscreen]="useSwiper"
-          [index]="i"
-          [showId]="showId"
-          [showSong]="song"
-          [showText]="showText"
-          [show]="show"
-        ></app-song>
-      </div>
-    </div>
-
-    <swiper-container *ngIf="useSwiper" scrollbar="true">
-      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy"
-                    [style.font-size]="textSize + 'em'"
-                    class="song-swipe">
-        <app-song
-          [fullscreen]="true"
-          [index]="i"
-          [showId]="showId"
-          [showSong]="song"
-          [showText]="true"
-          [show]="show"
-        ></app-song>
-        <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
-        <div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
-          <fa-icon [icon]="faNextSong"></fa-icon>
+      >
+      @if (!useSwiper) {
+        <p>{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
+          <app-user-name [userId]="show.owner"></app-user-name>
+        </p>
+      }
+      <div class="head">
+        <div>
+          @if (!useSwiper) {
+            <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
+          }
         </div>
-      </swiper-slide>
-    </swiper-container>
-
-    <ng-container *ngIf="songs$ | async as songs">
-      <app-add-song
-        *ngIf="songs && !show.published && !useSwiper"
-        [showSongs]="showSongs"
-        [show]="show"
-        [songs]="songs"
-      ></app-add-song>
-    </ng-container>
-
-    <app-button-row *ngIf="!useSwiper">
-      <ng-container *appRole="['leader']">
-        <ng-container *appOwner="show.owner">
-          <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">
-            Archivieren
+        <div [class.floating]="useSwiper">
+          <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
+          matTooltip="Verkleinern"></app-menu-button>
+          <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
+          matTooltip="Vergrößern"></app-menu-button>
+          <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
+            [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
+          matTooltip="Vollbild"></app-menu-button>
+        </div>
+      </div>
+      @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">
+          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
+            <div cdkDrag class="song-row">
+              <app-song
+                [fullscreen]="useSwiper"
+                [index]="i"
+                [showId]="showId"
+                [showSong]="song"
+                [showText]="showText"
+                [show]="show"
+              ></app-song>
+            </div>
+          }
+        </div>
+      }
+      @if (useSwiper) {
+        <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
+                [fullscreen]="true"
+                [index]="i"
+                [showId]="showId"
+                [showSong]="song"
+                [showText]="true"
+                [show]="show"
+              ></app-song>
+              <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
+              @if (getNextSong(orderedShowSongs(show), i); as next) {
+                <div class="next-song">{{ next }}
+                  <fa-icon [icon]="faNextSong"></fa-icon>
+                </div>
+              }
+            </swiper-slide>
+          }
+        </swiper-container>
+      }
+      @if (songs$ | async; as songs) {
+        @if (songs && !show.published && !useSwiper) {
+          <app-add-song
+            [showSongs]="showSongs"
+            [show]="show"
+            [songs]="songs"
+          ></app-add-song>
+        }
+      }
+      @if (!useSwiper) {
+        <app-button-row>
+          <ng-container *appRole="['leader']">
+            <ng-container *appOwner="show.owner">
+              @if (!show.archived) {
+                <app-button (click)="onArchive(true)" [icon]="faBox">
+                  Archivieren
+                </app-button>
+              }
+              @if (show.archived) {
+                <app-button (click)="onArchive(false)" [icon]="faBoxOpen">
+                  Wiederherstellen
+                </app-button>
+              }
+              @if (!show.published) {
+                <app-button (click)="onPublish(true)" [icon]="faPublish">
+                  Veröffentlichen
+                </app-button>
+              }
+              @if (show.published) {
+                <app-button (click)="onPublish(false)" [icon]="faUnpublish">
+                  Veröffentlichung zurückziehen
+                </app-button>
+              }
+              @if (show.published) {
+                <app-button (click)="onShare(show)" [icon]="faShare">
+                  Teilen
+                </app-button>
+              }
+              @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>
-          <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">
-            Wiederherstellen
-          </app-button>
-          <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">
-            Veröffentlichen
-          </app-button>
-          <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
-            Veröffentlichung zurückziehen
-          </app-button>
-          <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
-            Teilen
-          </app-button>
-          <app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
-            Ändern
-          </app-button>
-        </ng-container>
-      </ng-container>
-
-      <app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
-        Herunterladen
-      </app-button>
-      <mat-menu #menu="matMenu">
-        <app-button (click)="onDownload()" [icon]="faUser">
-          Ablauf für Lobpreisgruppe
-        </app-button>
-        <app-button (click)="onDownloadHandout()" [icon]="faUsers">
-          Handout mit Copyright Infos
-        </app-button>
-      </mat-menu>
-    </app-button-row>
-  </app-card>
-</div>
+          <mat-menu #menu="matMenu">
+            <app-button (click)="onDownload()" [icon]="faUser">
+              Ablauf für Lobpreisgruppe
+            </app-button>
+            <app-button (click)="onDownloadHandout()" [icon]="faUsers">
+              Handout mit Copyright Infos
+            </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,47 +1,69 @@
-<div *ngIf="iSong && iSong && show">
-  <div *ngIf="show.published || fullscreen" class="title published">
-    <div class="key">{{ iSong.key }}</div>
-    <div>{{ iSong.title }}</div>
-  </div>
-
-  <div *ngIf="!show.published && !fullscreen" class="song">
-    <span class="title">{{ iSong.title }}</span>
-    <span *ngIf="!edit" class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
-      (click)="openKeySelect()">{{ iSong.key }}</span>
-      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
-        <mat-select #option [formControl]="keyFormControl">
-          <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
-        </mat-select>
+@if (iSong && iSong && show) {
+  <div>
+    @if (show.published || fullscreen) {
+      <div class="title published">
+        <div class="key">{{ iSong.key }}</div>
+        <div>{{ iSong.title }}</div>
+      </div>
+    }
+    @if (!show.published && !fullscreen) {
+      <div class="song">
+        <span class="title">{{ iSong.title }}</span>
+        @if (!edit) {
+          <span class="keys">
+            @if (iSong.keyOriginal !== iSong.key) {
+              <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+              }<span
+            (click)="openKeySelect()">{{ iSong.key }}</span>
+            @if (keys) {
+              <mat-form-field (click)="option.open()" class="transpose">
+                <mat-select #option [formControl]="keyFormControl">
+                  @for (key of keys; track key) {
+                    <mat-option [value]="key">{{ key }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+          </span>
+        }
+        @if (!edit) {
+          <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
+          matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
+        }
+        @if (!edit) {
+          <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
+          matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+        }
+      </div>
+    }
+    @if (edit) {
+      <mat-form-field appearance="outline">
+        <mat-label>Songtext</mat-label>
+        <textarea [cdkTextareaAutosize]="true"
+          [formControl]="editSongControl"
+          class="edit"
+          matInput
+          matTooltip="Tonart ändern"
+        ></textarea>
       </mat-form-field>
-    </span>
-    <app-menu-button (click)="onEdit()" *ngIf="!edit" [icon]="faEdit" class="btn-edit btn-icon"
-                     matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
-    <app-menu-button (click)="onDelete()" *ngIf="!edit" [icon]="faDelete" class="btn-delete btn-icon"
-                     matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+    }
+    @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)"
+        [chordMode]="iSong.chordMode"
+        [showSwitch]="!show.published"
+        [text]="iSong.text"
+        [transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
+      ></app-song-text>
+    }
   </div>
-
-  <mat-form-field *ngIf="edit" appearance="outline">
-    <mat-label>Songtext</mat-label>
-    <textarea [cdkTextareaAutosize]="true"
-              [formControl]="editSongControl"
-              class="edit"
-              matInput
-              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">
-    <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
-    <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
-  </app-button-row>
-
-  <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,