control flow migration

Author: mrachek

src/app/courses/course/course.component.html

@@ -4,9 +4,11 @@ <h2>{{course?.titles?.description}}</h2>
     <mat-form-field>
         <input matInput placeholder="Search lessons" #input>
     </mat-form-field>
-    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
+    @if (dataSource.loading$ | async) {
+<div class="spinner-container">
         <mat-spinner></mat-spinner>
     </div>
+}
     <div class="mat-elevation-z8">
       <mat-table class="lessons-table" [dataSource]="dataSource"
                  matSort matSortActive="seqNo" matSortDirection="asc" matSortDisableClear>

src/app/courses/courses-card-list/courses-card-list.component.html

@@ -1,4 +1,5 @@
-<mat-card *ngFor="let course of courses" class="course-card mat-elevation-z10">
+@for (course of courses; track course) {
+  <mat-card class="course-card mat-elevation-z10">
   <mat-card-header>
     <mat-card-title>{{ course.titles.description }}</mat-card-title>
   </mat-card-header>
@@ -19,3 +20,4 @@
 
   </mat-card-actions>
 </mat-card>
+}

src/app/courses/home/home.component.html

@@ -1,20 +1,28 @@
 <div class="container">
   <h3>All Courses</h3>
   <mat-tab-group>
-    <ng-container *ngIf="(beginnerCourses$ | async) as beginnerCourses">
-      <mat-tab label="Beginners" *ngIf="beginnerCourses?.length > 0">
+    @if ((beginnerCourses$ | async); as beginnerCourses) {
+
+      @if (beginnerCourses?.length > 0) {
+<mat-tab label="Beginners">
         <courses-card-list (courseEdited)="reloadCourses()"
                            [courses]="beginnerCourses">
         </courses-card-list>
       </mat-tab>
-    </ng-container>
-    <ng-container *ngIf="(advancedCourses$ | async) as advancedCourses">
-      <mat-tab label="Advanced" *ngIf="advancedCourses?.length > 0">
+}
+    
+}
+    @if ((advancedCourses$ | async); as advancedCourses) {
+
+      @if (advancedCourses?.length > 0) {
+<mat-tab label="Advanced">
         <courses-card-list (courseEdited)="reloadCourses()"
                            [courses]="advancedCourses">
         </courses-card-list>
       </mat-tab>
-    </ng-container>
+}
+    
+}
   </mat-tab-group>
 </div>