build: switch development apps to new control flow

Switches the dev and e2e apps to use the new control flow.
angular · Nov 6, 2023 · f3f0fb8 · f3f0fb8
1 parent 3caea0f
commit f3f0fb8
Show file tree

Hide file tree

Showing 35 changed files with 988 additions and 755 deletions.
diff --git a/src/dev-app/autocomplete/autocomplete-demo.html b/src/dev-app/autocomplete/autocomplete-demo.html
@@ -21,11 +21,12 @@
       [hideSingleSelectionIndicator]="reactiveHideSingleSelectionIndicator"
       [autoActiveFirstOption]="reactiveAutoActiveFirstOption"
       [requireSelection]="reactiveRequireSelection">
-      <mat-option *ngFor="let state of reactiveStates; let index = index" [value]="state"
-        [disabled]="reactiveIsStateDisabled(state.index)">
-        <span>{{ state.name }}</span>
-        <span class="demo-secondary-text"> ({{ state.code }}) </span>
-      </mat-option>
+      @for (state of reactiveStates; track state; let index = $index) {
+        <mat-option [value]="state" [disabled]="reactiveIsStateDisabled(state.index)">
+          <span>{{ state.name }}</span>
+          <span class="demo-secondary-text"> ({{ state.code }}) </span>
+        </mat-option>
+      }
     </mat-autocomplete>
 
     <p>
@@ -66,21 +67,25 @@
     <div>Template-driven value (currentState): {{ currentState }}</div>
     <div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>
 
-    <!-- Added an ngIf below to test that autocomplete works with ngIf -->
-    <mat-form-field *ngIf="true" [color]="templateStatesTheme">
-      <mat-label>State</mat-label>
-      <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
-        (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
-      <mat-autocomplete #tdAuto="matAutocomplete"
-        [hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
-        [autoActiveFirstOption]="templateAutoActiveFirstOption"
-        [requireSelection]="templateRequireSelection">
-        <mat-option *ngFor="let state of tdStates" [value]="state.name"
-          [disabled]="templateIsStateDisabled(state.index)">
-          <span>{{ state.name }}</span>
-        </mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
+    <!-- Added an @if below to test that autocomplete works with @if -->
+    @if (true) {
+      <mat-form-field [color]="templateStatesTheme">
+        <mat-label>State</mat-label>
+        <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
+          (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+        <mat-autocomplete #tdAuto="matAutocomplete"
+          [hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
+          [autoActiveFirstOption]="templateAutoActiveFirstOption"
+          [requireSelection]="templateRequireSelection">
+          @for (state of tdStates; track state) {
+            <mat-option [value]="state.name"
+              [disabled]="templateIsStateDisabled(state.index)">
+              <span>{{ state.name }}</span>
+            </mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    }
 
     <p>
       <button mat-button (click)="clearTemplateState()">RESET</button>
@@ -89,9 +94,9 @@
         TOGGLE DISABLED
       </button>
       <select [(ngModel)]="templateStatesTheme">
-        <option *ngFor="let theme of availableThemes" [value]="theme.value">
-          {{theme.name}}
-        </option>
+        @for (theme of availableThemes; track theme) {
+          <option [value]="theme.value">{{theme.name}}</option>
+        }
       </select>
     </p>
     <p>
@@ -141,8 +146,11 @@
 </div>
 
 <mat-autocomplete #groupedAuto="matAutocomplete">
-  <mat-optgroup *ngFor="let group of filteredGroupedStates"
-    [label]="'States starting with ' + group.letter">
-    <mat-option *ngFor="let state of group.states" [value]="state.name">{{ state.name }}</mat-option>
-  </mat-optgroup>
+  @for (group of filteredGroupedStates; track group) {
+    <mat-optgroup [label]="'States starting with ' + group.letter">
+      @for (state of group.states; track state) {
+        <mat-option [value]="state.name">{{ state.name }}</mat-option>
+      }
+    </mat-optgroup>
+  }
 </mat-autocomplete>
diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
@@ -224,9 +224,9 @@ export class AutocompleteDemo {
         <mat-label>T-Shirt Size</mat-label>
         <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentSize" name="size">
         <mat-autocomplete #tdAuto="matAutocomplete">
-          <mat-option *ngFor="let size of sizes" [value]="size">
-            {{size}}
-          </mat-option>
+          @for (size of sizes; track size) {
+            <mat-option [value]="size">{{size}}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
 

diff --git a/src/dev-app/badge/badge-demo.html b/src/dev-app/badge/badge-demo.html
@@ -54,9 +54,9 @@ <h3>Size</h3>
 
   <div class="demo-badge">
     <h3>Text</h3>
-    <span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible">
-      Hello
-    </span>
+    @if (visible) {
+      <span [matBadge]="badgeContent" matBadgeOverlap="false">Hello</span>
+    }
 
     <span matBadge="11111" matBadgeOverlap="false">
       Hello

diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.html b/src/dev-app/bottom-sheet/bottom-sheet-demo.html
@@ -36,10 +36,12 @@ <h2>Options</h2>
 
 <ng-template let-bottomSheetRef="bottomSheetRef">
   <mat-nav-list>
-    <mat-list-item (click)="bottomSheetRef.dismiss()" *ngFor="let action of [1, 2, 3]">
-      <mat-icon matListItemIcon>folder</mat-icon>
-      <span matListItemTitle>Action {{ action }}</span>
-      <span matLine>Description</span>
-    </mat-list-item>
+    @for (action of [1, 2, 3]; track action) {
+      <mat-list-item (click)="bottomSheetRef.dismiss()">
+        <mat-icon matListItemIcon>folder</mat-icon>
+        <span matListItemTitle>Action {{ action }}</span>
+        <span matLine>Description</span>
+      </mat-list-item>
+    }
   </mat-nav-list>
 </ng-template>
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
@@ -70,10 +70,12 @@ export class BottomSheetDemo {
 @Component({
   template: `
     <mat-nav-list>
-      <a href="#" mat-list-item (click)="handleClick($event)" *ngFor="let action of [1, 2, 3]">
-        <span matListItemTitle>Action {{ action }}</span>
-        <span matListItemLine>Description</span>
-      </a>
+      @for (action of [1, 2, 3]; track action) {
+        <a href="#" mat-list-item (click)="handleClick($event)">
+          <span matListItemTitle>Action {{ action }}</span>
+          <span matListItemLine>Description</span>
+        </a>
+      }
     </mat-nav-list>
   `,
   standalone: true,

diff --git a/src/dev-app/button-toggle/button-toggle-demo.html b/src/dev-app/button-toggle/button-toggle-demo.html
@@ -83,9 +83,9 @@ <h1>Single Toggle</h1>
 <h1>Dynamic Exclusive Selection</h1>
 <section>
   <mat-button-toggle-group name="pies" [(ngModel)]="favoritePie" [vertical]="isVertical">
-    <mat-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
-      {{pie}}
-    </mat-button-toggle>
+    @for (pie of pieOptions; track pie) {
+      <mat-button-toggle [value]="pie">{{pie}}</mat-button-toggle>
+    }
   </mat-button-toggle-group>
   <p>Your favorite type of pie is: {{favoritePie}}</p>
 </section>
diff --git a/src/dev-app/cdk-menu/cdk-menu-demo.html b/src/dev-app/cdk-menu/cdk-menu-demo.html
@@ -145,48 +145,44 @@ <h3>Radio items</h3>
 
   <ng-template #sizeMenu>
     <div class="example-menu" cdkMenu>
-      <button
-          *ngFor="let size of sizes"
+      @for (size of sizes; track size) {
+        <button
           cdkMenuItemRadio
           [cdkMenuItemChecked]="selectedSize === size"
-          (cdkMenuItemTriggered)="selectedSize = size">
-        {{size}}
-      </button>
+          (cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
+      }
     </div>
   </ng-template>
 
   <ng-template #colorMenu>
     <div class="example-menu" cdkMenu>
       <div cdkMenuGroup>
-        <button
-            *ngFor="let color of colors"
+        @for (color of colors; track color) {
+          <button
             cdkMenuItemRadio
             [cdkMenuItemChecked]="selectedColor === color"
-            (cdkMenuItemTriggered)="selectedColor = color">
-          {{color}}
-        </button>
+            (cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
+        }
       </div>
     </div>
   </ng-template>
 
   <ng-template #sizeAndColorMenu>
     <div class="example-menu" cdkMenu>
-      <button
-          *ngFor="let size of sizes"
+      @for (size of sizes; track size) {
+        <button
           cdkMenuItemRadio
           [cdkMenuItemChecked]="selectedSize === size"
-          (cdkMenuItemTriggered)="selectedSize = size">
-        {{size}}
-      </button>
+          (cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
+      }
       <hr />
       <div cdkMenuGroup>
-        <button
-            *ngFor="let color of colors"
+        @for (color of colors; track color) {
+          <button
             cdkMenuItemRadio
             [cdkMenuItemChecked]="selectedColor === color"
-            (cdkMenuItemTriggered)="selectedColor = color">
-          {{color}}
-        </button>
+            (cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
+        }
       </div>
     </div>
   </ng-template>

diff --git a/src/dev-app/checkbox/checkbox-demo.html b/src/dev-app/checkbox/checkbox-demo.html
@@ -151,7 +151,9 @@ <h5>Click action: check-indeterminate</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -167,7 +169,9 @@ <h5>Click action: check-indeterminate</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
   <div clickActionCheck>
@@ -187,7 +191,9 @@ <h5>Click action: check</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -203,7 +209,9 @@ <h5>Click action: check</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
   <div clickActionNoop>
@@ -223,7 +231,9 @@ <h5>Click action: noop</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -239,7 +249,9 @@ <h5>Click action: noop</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
   <div animationsNoop>
@@ -259,7 +271,9 @@ <h5>No animations</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -275,7 +289,9 @@ <h5>No animations</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
 </div>

diff --git a/src/dev-app/checkbox/nested-checklist.html b/src/dev-app/checkbox/nested-checklist.html
@@ -1,18 +1,23 @@
 <h2>Tasks</h2>
 <ul>
-  <li *ngFor="let task of tasks">
-    <mat-checkbox [(ngModel)]="task.completed"
-                 [checked]="allComplete(task)"
-                 [indeterminate]="someComplete(task.subtasks)"
-                 (change)="setAllCompleted(task.subtasks, $event.checked)">
-      <h3>{{task.name}}</h3>
-    </mat-checkbox>
-    <ul>
-      <li *ngFor="let subtask of task.subtasks">
-        <mat-checkbox [(ngModel)]="subtask.completed">
-          {{subtask.name}}
-        </mat-checkbox>
-      </li>
-    </ul>
-  </li>
+  @for (task of tasks; track task) {
+    <li>
+      <mat-checkbox
+        [(ngModel)]="task.completed"
+        [checked]="allComplete(task)"
+        [indeterminate]="someComplete(task.subtasks)"
+        (change)="setAllCompleted(task.subtasks, $event.checked)">
+        <h3>{{task.name}}</h3>
+      </mat-checkbox>
+      <ul>
+        @for (subtask of task.subtasks; track subtask) {
+          <li>
+            <mat-checkbox [(ngModel)]="subtask.completed">
+              {{subtask.name}}
+            </mat-checkbox>
+          </li>
+        }
+      </ul>
+    </li>
+  }
 </ul>