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>