migrate angular 21

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

@@ -1,11 +1,15 @@
-<div *ngIf="songs" 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>
-    </mat-select>
-  </mat-form-field>
-</div>
+@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>
+        @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,8 +1,10 @@
 <button mat-button>
-  <span *ngIf="icon"
-  ><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span
-  >
-  <span class="button-content">
-    <ng-content></ng-content>
-  </span>
-</button>
+  @if (icon) {
+    <span
+      ><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span
+      >
+    }
+    <span class="button-content">
+      <ng-content></ng-content>
+    </span>
+  </button>

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">
-  <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 (closeLink && !fullscreen) {
+    <button
+      [routerLink]="closeLink"
+      class="btn-close"
+      mat-icon-button
+      >
+      <fa-icon [icon]="closeIcon"></fa-icon>
+    </button>
+  }
+  @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

@@ -3,7 +3,7 @@
     (click)="onFilterClick()"
     [class.filter-active]="anyFilterActive"
     mat-icon-button
-  >
+    >
     <fa-icon [icon]="faFilter"></fa-icon>
   </button>
   <button mat-icon-button routerLink="new">
@@ -11,8 +11,10 @@
   </button>
 </div>
 
-<div *ngIf="filterVisible || anyFilterActive" @fade>
-  <app-card>
-    <ng-content></ng-content>
-  </app-card>
-</div>
+@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 @@
-<div
-  (click)="onClick()"
-  *ngIf="sections && !fullscreen"
-  [class.chords]="iChordMode !== 'hide'"
-  class="song-text"
->
-  <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">
-    <div
-      #section
-      *ngFor="let section of sections; let i = index"
-      [class.chorus]="section.type === 1"
-      class="section"
+@if (sections && !fullscreen) {
+  <div
+    (click)="onClick()"
+    [class.chords]="iChordMode !== 'hide'"
+    class="song-text"
     >
-      <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">
-      Es wurden keine Liedabschnitte gefunden! Bitte mindestens einen Abschnitt festlegen!
+    @if (showSwitch) {
+      <button
+        (click)="onChordClick()"
+        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
+          [class.chorus]="section.type === 1"
+          class="section"
+          >
+          @for (line of getLines(section); track line) {
+            <div
+              [class.chord]="line.type === 0"
+              [class.comment]="isComment(line.text)"
+              [class.disabled]="checkDisabled(i)"
+              class="line"
+              >{{ transform(line.text) }}
+            </div>
+          }
+        </div>
+      }
+      @if (sections.length===0) {
+        <div class="error">
+          Es wurden keine Liedabschnitte gefunden! Bitte mindestens einen Abschnitt festlegen!
+        </div>
+      }
     </div>
+    <ng-content></ng-content>
   </div>
+}
 
-  <ng-content></ng-content>
-</div>
-
-<div
-  (click)="onClick()"
-  *ngIf="sections && fullscreen"
-  [@songSwitch]="sections"
-  [class.chords]="iChordMode !== 'hide'"
-  class="song-text"
->
-  <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>
-    <div
-      #section
-      *ngFor="let section of sections; let i = index"
-      [class.chorus]="section.type === 1"
-      class="section"
+@if (sections && fullscreen) {
+  <div
+    (click)="onClick()"
+    [@songSwitch]="sections"
+    [class.chords]="iChordMode !== 'hide'"
+    class="song-text"
     >
-      <div
-        *ngFor="let line of getLines(section)"
-        [class.chord]="line.type === 0"
-        [class.disabled]="checkDisabled(i)"
-        class="line"
-      >{{ line.text.trim() }}
-      </div>
+    @if (showSwitch) {
+      <button
+        (click)="onChordClick()"
+        class="menu"
+        mat-icon-button
+        >
+        <fa-icon [icon]="faLines"></fa-icon>
+      </button>
+    }
+    <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
+      @if (header) {
+        <h1>{{ header }}</h1>
+      }
+      @for (section of sections; track section; let i = $index) {
+        <div
+          #section
+          [class.chorus]="section.type === 1"
+          class="section"
+          >
+          @for (line of getLines(section); track line) {
+            <div
+              [class.chord]="line.type === 0"
+              [class.disabled]="checkDisabled(i)"
+              class="line"
+              >{{ line.text.trim() }}
+            </div>
+          }
+        </div>
+      }
     </div>
+    <ng-content></ng-content>
   </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[] = [];