NAS-129913: New Control Flow Syntax

truenas · Jul 10, 2024 · 95bebd9 · 95bebd9
1 parent 0ffd152
commit 95bebd9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 58 deletions.
diff --git a/src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.html b/src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.html
@@ -15,20 +15,17 @@
     [required]="required"
     [attr.aria-label]="label"
   >
-    @for (chipLabel of labels; track chipLabel) {
-      <mat-chip-row
-        class="chip"
-        [disabled]="false"
-        [removable]="!isDisabled"
-        [attr.aria-label]="chipLabel"
-        (removed)="onRemove(chipLabel)"
-      >
-        {{ chipLabel }}
-        @if (!isDisabled) {
-          <ix-icon name="cancel" matChipRemove></ix-icon>
-        }
-      </mat-chip-row>
-    }
+    <mat-chip-row
+      *ngFor="let chipLabel of labels"
+      class="chip"
+      [disabled]="false"
+      [removable]="!isDisabled"
+      [attr.aria-label]="chipLabel"
+      (removed)="onRemove(chipLabel)"
+    >
+      {{ chipLabel }}
+      <ix-icon *ngIf="!isDisabled" name="cancel" matChipRemove></ix-icon>
+    </mat-chip-row>
 
     <input
       #chipInput
@@ -44,16 +41,15 @@
   </mat-chip-grid>
 
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onAdd($event.option.value)">
-    @if (suggestions$) {
-      @for (suggestion of suggestions$ | async; track suggestion) {
-        <mat-option
-          [value]="suggestion"
-          [ixTest]="[controlDirective.name, suggestion]"
-        >
-          {{ suggestion }}
-        </mat-option>
-      }
-    }
+    <ng-container *ngIf="suggestions$">
+      <mat-option
+        *ngFor="let suggestion of suggestions$ | async"
+        [value]="suggestion"
+        [ixTest]="[controlDirective.name, suggestion]"
+      >
+        {{ suggestion }}
+      </mat-option>
+    </ng-container>
   </mat-autocomplete>
 </div>
 

diff --git a/src/app/modules/ix-table/components/ix-table-body/ix-table-body.component.html b/src/app/modules/ix-table/components/ix-table-body/ix-table-body.component.html
@@ -1,4 +1,4 @@
-@for (row of dataProvider.currentPage$ | async; track row) {
+<ng-container *ngFor="let row of dataProvider.currentPage$ | async">
   <tr
     class="row"
     tabindex="0"
@@ -10,38 +10,34 @@
     (click)="onToggle(row)"
     (keydown.enter)="onToggle(row)"
   >
-    @for (column of displayedColumns; track column; let idx = $index) {
-      <td [ngClass]="column.cssClass || ''">
-        @if (getTemplateByColumnIndex(idx); as template) {
-          <ng-container
-            *ngTemplateOutlet="template; context: { $implicit: row }"
-          ></ng-container>
-        } @else {
-          <ng-template
-            ix-body-cell
-            [row]="row"
-            [column]="column"
-          ></ng-template>
-        }
-      </td>
-    }
-
-    @if (detailsTemplate) {
-      <td class="toggle-cell">
-        <button
-          mat-icon-button
-          ixTest="toggle-row"
-          [matTooltip]="isExpanded(row) ? ('Collapse Row' | translate) : ('Expand Row' | translate)"
-          (click)="$event.stopPropagation(); onToggle(row)"
-        >
-          @if (isExpanded(row)) {
-            <ix-icon name="mdi-chevron-up"></ix-icon>
-          } @else {
-            <ix-icon name="mdi-chevron-down"></ix-icon>
-          }
-        </button>
-      </td>
-    }
+    <td
+      *ngFor="let column of displayedColumns; index as idx"
+      [ngClass]="column.cssClass || ''"
+    >
+      <ng-container *ngIf="getTemplateByColumnIndex(idx) as template">
+        <ng-container
+          *ngTemplateOutlet="template; context: { $implicit: row }"
+        ></ng-container>
+      </ng-container>
+      <ng-container *ngIf="!getTemplateByColumnIndex(idx)">
+        <ng-template
+          ix-body-cell
+          [row]="row"
+          [column]="column"
+        ></ng-template>
+      </ng-container>
+    </td>
+    <td *ngIf="detailsTemplate" class="toggle-cell">
+      <button
+        mat-icon-button
+        ixTest="toggle-row"
+        [matTooltip]="isExpanded(row) ? ('Collapse Row' | translate) : ('Expand Row' | translate)"
+        (click)="$event.stopPropagation(); onToggle(row)"
+      >
+        <ix-icon *ngIf="isExpanded(row)" name="mdi-chevron-up"></ix-icon>
+        <ix-icon *ngIf="!isExpanded(row)" name="mdi-chevron-down"></ix-icon>
+      </button>
+    </td>
   </tr>
 
   @if (detailsTemplate && isExpanded(row)) {
@@ -55,7 +51,7 @@
       </td>
     </tr>
   }
-}
+</ng-container>
 
 @if (isLoading) {
   <td [attr.colspan]="displayedColumns.length">