migrate angular 21

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);
     })
   );