migrate angular 21

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

@@ -1,14 +1,16 @@
 <app-card heading="Angehängte Dateien">
-  <div *ngIf="currentUpload">
-    <div class="progress">
-      <div
-        [ngStyle]="{ width: currentUpload?.progress + '%' }"
-        class="progress-bar progress-bar-animated"
-      ></div>
+  @if (currentUpload) {
+    <div>
+      <div class="progress">
+        <div
+          [ngStyle]="{ width: currentUpload?.progress + '%' }"
+          class="progress-bar progress-bar-animated"
+        ></div>
+      </div>
+      Progress: {{ currentUpload?.name }} | {{ currentUpload?.progress }}%
+      Complete
     </div>
-    Progress: {{ currentUpload?.name }} | {{ currentUpload?.progress }}%
-    Complete
-  </div>
+  }
   <div class="upload">
     <label>
       <input (change)="detectFiles($event)" type="file" />
@@ -18,12 +20,14 @@
       (click)="uploadSingle()"
       [disabled]="!selectedFiles"
       mat-icon-button
-    >
+      >
       <mat-icon>cloud_upload</mat-icon>
     </button>
   </div>
 
-  <p *ngFor="let file of files$ | async">
-    <app-file [file]="file" [songId]="songId"></app-file>
-  </p>
+  @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;