migrate angular 21

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-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-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-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-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">
-  <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">
-      <div class="number">{{ song.number }}</div>
-      <div>{{ song.title }}</div>
-      <div>
-        <ng-container *appRole="['contributor']">
-          <div *ngIf="song.status === 'draft'" class="warning">
-            <fa-icon [icon]="faDraft"></fa-icon>
+@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">
+      @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']">
+              @if (song.status === 'draft') {
+                <div class="warning">
+                  <fa-icon [icon]="faDraft"></fa-icon>
+                </div>
+              }
+              @if (song.status === 'set') {
+                <div class="neutral">
+                  <fa-icon [icon]="faDraft"></fa-icon>
+                </div>
+              }
+              @if (song.status === 'final') {
+                <div class="success">
+                  <fa-icon [icon]="faFinal"></fa-icon>
+                </div>
+              }
+            </ng-container>
+            @if (song.legalType === 'open') {
+              <div class="warning">
+                <fa-icon [icon]="faLegal"></fa-icon>
+              </div>
+            }
           </div>
-          <div *ngIf="song.status === 'set'" class="neutral">
-            <fa-icon [icon]="faDraft"></fa-icon>
-          </div>
-          <div *ngIf="song.status === 'final'" class="success">
-            <fa-icon [icon]="faFinal"></fa-icon>
-          </div>
-        </ng-container>
-        <div *ngIf="song.legalType === 'open'" class="warning">
-          <fa-icon [icon]="faLegal"></fa-icon>
+          <div>{{ song.key }}</div>
         </div>
-      </div>
-      <div>{{ song.key }}</div>
-    </div>
-
-  </app-card>
-</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;