Skip to content

Commit bd7c57a

Browse files
crisbetocrisbeto
committed
build: switch development apps to new control flow
Switches the dev and e2e apps to use the new control flow. (cherry picked from commit 1bfd4ae)
1 parent 894344d commit bd7c57a

35 files changed

+988
-755
lines changed

‎src/dev-app/autocomplete/autocomplete-demo.html

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,12 @@
2121
[hideSingleSelectionIndicator]="reactiveHideSingleSelectionIndicator"
2222
[autoActiveFirstOption]="reactiveAutoActiveFirstOption"
2323
[requireSelection]="reactiveRequireSelection">
24-
<mat-option *ngFor="let state of reactiveStates; let index = index" [value]="state"
25-
[disabled]="reactiveIsStateDisabled(state.index)">
26-
<span>{{ state.name }}</span>
27-
<span class="demo-secondary-text"> ({{ state.code }}) </span>
28-
</mat-option>
24+
@for (state of reactiveStates; track state; let index = $index) {
25+
<mat-option [value]="state" [disabled]="reactiveIsStateDisabled(state.index)">
26+
<span>{{ state.name }}</span>
27+
<span class="demo-secondary-text"> ({{ state.code }}) </span>
28+
</mat-option>
29+
}
2930
</mat-autocomplete>
3031

3132
<p>
@@ -66,21 +67,25 @@
6667
<div>Template-driven value (currentState): {{ currentState }}</div>
6768
<div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>
6869

69-
<!-- Added an ngIf below to test that autocomplete works with ngIf -->
70-
<mat-form-field *ngIf="true" [color]="templateStatesTheme">
71-
<mat-label>State</mat-label>
72-
<input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
73-
(ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
74-
<mat-autocomplete #tdAuto="matAutocomplete"
75-
[hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
76-
[autoActiveFirstOption]="templateAutoActiveFirstOption"
77-
[requireSelection]="templateRequireSelection">
78-
<mat-option *ngFor="let state of tdStates" [value]="state.name"
79-
[disabled]="templateIsStateDisabled(state.index)">
80-
<span>{{ state.name }}</span>
81-
</mat-option>
82-
</mat-autocomplete>
83-
</mat-form-field>
70+
<!-- Added an @if below to test that autocomplete works with @if -->
71+
@if (true) {
72+
<mat-form-field [color]="templateStatesTheme">
73+
<mat-label>State</mat-label>
74+
<input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
75+
(ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
76+
<mat-autocomplete #tdAuto="matAutocomplete"
77+
[hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
78+
[autoActiveFirstOption]="templateAutoActiveFirstOption"
79+
[requireSelection]="templateRequireSelection">
80+
@for (state of tdStates; track state) {
81+
<mat-option [value]="state.name"
82+
[disabled]="templateIsStateDisabled(state.index)">
83+
<span>{{ state.name }}</span>
84+
</mat-option>
85+
}
86+
</mat-autocomplete>
87+
</mat-form-field>
88+
}
8489

8590
<p>
8691
<button mat-button (click)="clearTemplateState()">RESET</button>
@@ -89,9 +94,9 @@
8994
TOGGLE DISABLED
9095
</button>
9196
<select [(ngModel)]="templateStatesTheme">
92-
<option *ngFor="let theme of availableThemes" [value]="theme.value">
93-
{{theme.name}}
94-
</option>
97+
@for (theme of availableThemes; track theme) {
98+
<option [value]="theme.value">{{theme.name}}</option>
99+
}
95100
</select>
96101
</p>
97102
<p>
@@ -141,8 +146,11 @@
141146
</div>
142147

143148
<mat-autocomplete #groupedAuto="matAutocomplete">
144-
<mat-optgroup *ngFor="let group of filteredGroupedStates"
145-
[label]="'States starting with ' + group.letter">
146-
<mat-option *ngFor="let state of group.states" [value]="state.name">{{ state.name }}</mat-option>
147-
</mat-optgroup>
149+
@for (group of filteredGroupedStates; track group) {
150+
<mat-optgroup [label]="'States starting with ' + group.letter">
151+
@for (state of group.states; track state) {
152+
<mat-option [value]="state.name">{{ state.name }}</mat-option>
153+
}
154+
</mat-optgroup>
155+
}
148156
</mat-autocomplete>

‎src/dev-app/autocomplete/autocomplete-demo.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,9 +224,9 @@ export class AutocompleteDemo {
224224
<mat-label>T-Shirt Size</mat-label>
225225
<input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentSize" name="size">
226226
<mat-autocomplete #tdAuto="matAutocomplete">
227-
<mat-option *ngFor="let size of sizes" [value]="size">
228-
{{size}}
229-
</mat-option>
227+
@for (size of sizes; track size) {
228+
<mat-option [value]="size">{{size}}</mat-option>
229+
}
230230
</mat-autocomplete>
231231
</mat-form-field>
232232

‎src/dev-app/badge/badge-demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ <h3>Size</h3>
5454

5555
<div class="demo-badge">
5656
<h3>Text</h3>
57-
<span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible">
58-
Hello
59-
</span>
57+
@if (visible) {
58+
<span [matBadge]="badgeContent" matBadgeOverlap="false">Hello</span>
59+
}
6060

6161
<span matBadge="11111" matBadgeOverlap="false">
6262
Hello

‎src/dev-app/bottom-sheet/bottom-sheet-demo.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,12 @@ <h2>Options</h2>
3636

3737
<ng-template let-bottomSheetRef="bottomSheetRef">
3838
<mat-nav-list>
39-
<mat-list-item (click)="bottomSheetRef.dismiss()" *ngFor="let action of [1, 2, 3]">
40-
<mat-icon matListItemIcon>folder</mat-icon>
41-
<span matListItemTitle>Action {{ action }}</span>
42-
<span matLine>Description</span>
43-
</mat-list-item>
39+
@for (action of [1, 2, 3]; track action) {
40+
<mat-list-item (click)="bottomSheetRef.dismiss()">
41+
<mat-icon matListItemIcon>folder</mat-icon>
42+
<span matListItemTitle>Action {{ action }}</span>
43+
<span matLine>Description</span>
44+
</mat-list-item>
45+
}
4446
</mat-nav-list>
4547
</ng-template>

‎src/dev-app/bottom-sheet/bottom-sheet-demo.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,12 @@ export class BottomSheetDemo {
7070
@Component({
7171
template: `
7272
<mat-nav-list>
73-
<a href="#" mat-list-item (click)="handleClick($event)" *ngFor="let action of [1, 2, 3]">
74-
<span matListItemTitle>Action {{ action }}</span>
75-
<span matListItemLine>Description</span>
76-
</a>
73+
@for (action of [1, 2, 3]; track action) {
74+
<a href="#" mat-list-item (click)="handleClick($event)">
75+
<span matListItemTitle>Action {{ action }}</span>
76+
<span matListItemLine>Description</span>
77+
</a>
78+
}
7779
</mat-nav-list>
7880
`,
7981
standalone: true,

‎src/dev-app/button-toggle/button-toggle-demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ <h1>Single Toggle</h1>
8383
<h1>Dynamic Exclusive Selection</h1>
8484
<section>
8585
<mat-button-toggle-group name="pies" [(ngModel)]="favoritePie" [vertical]="isVertical">
86-
<mat-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
87-
{{pie}}
88-
</mat-button-toggle>
86+
@for (pie of pieOptions; track pie) {
87+
<mat-button-toggle [value]="pie">{{pie}}</mat-button-toggle>
88+
}
8989
</mat-button-toggle-group>
9090
<p>Your favorite type of pie is: {{favoritePie}}</p>
9191
</section>

‎src/dev-app/cdk-menu/cdk-menu-demo.html

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -145,48 +145,44 @@ <h3>Radio items</h3>
145145

146146
<ng-template #sizeMenu>
147147
<div class="example-menu" cdkMenu>
148-
<button
149-
*ngFor="let size of sizes"
148+
@for (size of sizes; track size) {
149+
<button
150150
cdkMenuItemRadio
151151
[cdkMenuItemChecked]="selectedSize === size"
152-
(cdkMenuItemTriggered)="selectedSize = size">
153-
{{size}}
154-
</button>
152+
(cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
153+
}
155154
</div>
156155
</ng-template>
157156

158157
<ng-template #colorMenu>
159158
<div class="example-menu" cdkMenu>
160159
<div cdkMenuGroup>
161-
<button
162-
*ngFor="let color of colors"
160+
@for (color of colors; track color) {
161+
<button
163162
cdkMenuItemRadio
164163
[cdkMenuItemChecked]="selectedColor === color"
165-
(cdkMenuItemTriggered)="selectedColor = color">
166-
{{color}}
167-
</button>
164+
(cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
165+
}
168166
</div>
169167
</div>
170168
</ng-template>
171169

172170
<ng-template #sizeAndColorMenu>
173171
<div class="example-menu" cdkMenu>
174-
<button
175-
*ngFor="let size of sizes"
172+
@for (size of sizes; track size) {
173+
<button
176174
cdkMenuItemRadio
177175
[cdkMenuItemChecked]="selectedSize === size"
178-
(cdkMenuItemTriggered)="selectedSize = size">
179-
{{size}}
180-
</button>
176+
(cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
177+
}
181178
<hr />
182179
<div cdkMenuGroup>
183-
<button
184-
*ngFor="let color of colors"
180+
@for (color of colors; track color) {
181+
<button
185182
cdkMenuItemRadio
186183
[cdkMenuItemChecked]="selectedColor === color"
187-
(cdkMenuItemTriggered)="selectedColor = color">
188-
{{color}}
189-
</button>
184+
(cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
185+
}
190186
</div>
191187
</div>
192188
</ng-template>

‎src/dev-app/checkbox/checkbox-demo.html

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,9 @@ <h5>Click action: check-indeterminate</h5>
151151
[indeterminate]="demoIndeterminate"
152152
(change)="demoChecked = $event.checked"
153153
(indeterminateChange)="demoIndeterminate = $event">
154-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
154+
@if (!demoHideLabel) {
155+
Checkbox w/ [checked] & (change)
156+
}
155157
</mat-checkbox>
156158
<mat-checkbox
157159
[required]="demoRequired"
@@ -167,7 +169,9 @@ <h5>Click action: check-indeterminate</h5>
167169
[indeterminate]="demoIndeterminate"
168170
[(ngModel)]="demoChecked"
169171
(indeterminateChange)="demoIndeterminate = $event">
170-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
172+
@if (!demoHideLabel) {
173+
Checkbox w/ [(ngModel)]
174+
}
171175
</mat-checkbox>
172176
</div>
173177
<div clickActionCheck>
@@ -187,7 +191,9 @@ <h5>Click action: check</h5>
187191
[indeterminate]="demoIndeterminate"
188192
(change)="demoChecked = $event.checked"
189193
(indeterminateChange)="demoIndeterminate = $event">
190-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
194+
@if (!demoHideLabel) {
195+
Checkbox w/ [checked] & (change)
196+
}
191197
</mat-checkbox>
192198
<mat-checkbox
193199
[required]="demoRequired"
@@ -203,7 +209,9 @@ <h5>Click action: check</h5>
203209
[indeterminate]="demoIndeterminate"
204210
[(ngModel)]="demoChecked"
205211
(indeterminateChange)="demoIndeterminate = $event">
206-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
212+
@if (!demoHideLabel) {
213+
Checkbox w/ [(ngModel)]
214+
}
207215
</mat-checkbox>
208216
</div>
209217
<div clickActionNoop>
@@ -223,7 +231,9 @@ <h5>Click action: noop</h5>
223231
[indeterminate]="demoIndeterminate"
224232
(change)="demoChecked = $event.checked"
225233
(indeterminateChange)="demoIndeterminate = $event">
226-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
234+
@if (!demoHideLabel) {
235+
Checkbox w/ [checked] & (change)
236+
}
227237
</mat-checkbox>
228238
<mat-checkbox
229239
[required]="demoRequired"
@@ -239,7 +249,9 @@ <h5>Click action: noop</h5>
239249
[indeterminate]="demoIndeterminate"
240250
[(ngModel)]="demoChecked"
241251
(indeterminateChange)="demoIndeterminate = $event">
242-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
252+
@if (!demoHideLabel) {
253+
Checkbox w/ [(ngModel)]
254+
}
243255
</mat-checkbox>
244256
</div>
245257
<div animationsNoop>
@@ -259,7 +271,9 @@ <h5>No animations</h5>
259271
[indeterminate]="demoIndeterminate"
260272
(change)="demoChecked = $event.checked"
261273
(indeterminateChange)="demoIndeterminate = $event">
262-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
274+
@if (!demoHideLabel) {
275+
Checkbox w/ [checked] & (change)
276+
}
263277
</mat-checkbox>
264278
<mat-checkbox
265279
[required]="demoRequired"
@@ -275,7 +289,9 @@ <h5>No animations</h5>
275289
[indeterminate]="demoIndeterminate"
276290
[(ngModel)]="demoChecked"
277291
(indeterminateChange)="demoIndeterminate = $event">
278-
<ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
292+
@if (!demoHideLabel) {
293+
Checkbox w/ [(ngModel)]
294+
}
279295
</mat-checkbox>
280296
</div>
281297
</div>

‎src/dev-app/checkbox/nested-checklist.html

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
<h2>Tasks</h2>
22
<ul>
3-
<li *ngFor="let task of tasks">
4-
<mat-checkbox [(ngModel)]="task.completed"
5-
[checked]="allComplete(task)"
6-
[indeterminate]="someComplete(task.subtasks)"
7-
(change)="setAllCompleted(task.subtasks, $event.checked)">
8-
<h3>{{task.name}}</h3>
9-
</mat-checkbox>
10-
<ul>
11-
<li *ngFor="let subtask of task.subtasks">
12-
<mat-checkbox [(ngModel)]="subtask.completed">
13-
{{subtask.name}}
14-
</mat-checkbox>
15-
</li>
16-
</ul>
17-
</li>
3+
@for (task of tasks; track task) {
4+
<li>
5+
<mat-checkbox
6+
[(ngModel)]="task.completed"
7+
[checked]="allComplete(task)"
8+
[indeterminate]="someComplete(task.subtasks)"
9+
(change)="setAllCompleted(task.subtasks, $event.checked)">
10+
<h3>{{task.name}}</h3>
11+
</mat-checkbox>
12+
<ul>
13+
@for (subtask of task.subtasks; track subtask) {
14+
<li>
15+
<mat-checkbox [(ngModel)]="subtask.completed">
16+
{{subtask.name}}
17+
</mat-checkbox>
18+
</li>
19+
}
20+
</ul>
21+
</li>
22+
}
1823
</ul>

0 commit comments

Comments
 (0)