Skip to content

Commit 99b62ba

Browse files
crisbetocrisbeto
committed
docs(multiple): switch docs examples to new control flow
Switches the docs examples to use the new control flow instead of `*ngIf`, `*ngFor` and `*ngSwitch`.
1 parent 1bfd4ae commit 99b62ba

File tree

201 files changed

+1036
-1045
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

201 files changed

+1036
-1045
lines changed

‎guides/creating-a-custom-stepper-using-the-cdk-stepper.md

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,11 @@ This is the HTML template of our custom stepper component:
4545

4646
<footer class="step-navigation-bar">
4747
<button class="nav-button" cdkStepperPrevious>&larr;</button>
48-
<button
49-
class="step"
50-
*ngFor="let step of steps; let i = index;"
51-
[ngClass]="{'active': selectedIndex === i}"
52-
(click)="onClick(i)"
53-
>
54-
Step {{i + 1}}
55-
</button>
48+
@for (step of steps; track step) {
49+
<button class="step" [class.active]="selectedIndex === $index" (click)="onClick(i)">
50+
Step {{i + 1}}
51+
</button>
52+
}
5653
<button class="nav-button" cdkStepperNext>&rarr;</button>
5754
</footer>
5855
</section>
@@ -117,9 +114,11 @@ If you want to iterate over your steps and use your own custom component you can
117114

118115
```html
119116
<app-custom-stepper>
120-
<cdk-step *ngFor="let step of mySteps; let stepIndex = index">
121-
<my-step-component [step]="step"></my-step-component>
122-
</cdk-step>
117+
@for (step of mySteps; track step) {
118+
<cdk-step>
119+
<my-step-component [step]="$index"></my-step-component>
120+
</cdk-step>
121+
}
123122
</app-custom-stepper>
124123
```
125124

‎src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -26,45 +26,47 @@
2626
</form>
2727
</div>
2828
</ng-template>
29-
29+
3030
<tr>
3131
<th> No. </th>
3232
<th> First name </th>
3333
<th> Middle name </th>
3434
<th> Last name </th>
3535
</tr>
36-
37-
<tr *ngFor="let person of persons">
38-
<td> {{person.id}} </td>
3936

40-
<td [cdkPopoverEdit]="nameEdit"
41-
[cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
42-
[cdkPopoverEditColspan]="{after: 2}">
43-
{{person.firstName}}
44-
45-
<span *cdkRowHoverContent>
46-
<button cdkEditOpen>Edit</button>
47-
</span>
48-
</td>
49-
50-
<td [cdkPopoverEdit]="nameEdit"
51-
[cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
52-
[cdkPopoverEditColspan]="{before: 1, after: 1}">
53-
{{person.middleName}}
54-
55-
<span *cdkRowHoverContent>
56-
<button cdkEditOpen>Edit</button>
57-
</span>
58-
</td>
59-
60-
<td [cdkPopoverEdit]="nameEdit"
61-
[cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
62-
[cdkPopoverEditColspan]="{before: 2}">
63-
{{person.lastName}}
64-
65-
<span *cdkRowHoverContent>
66-
<button cdkEditOpen>Edit</button>
67-
</span>
68-
</td>
69-
</tr>
37+
@for (person of persons; track person) {
38+
<tr>
39+
<td> {{person.id}} </td>
40+
41+
<td [cdkPopoverEdit]="nameEdit"
42+
[cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
43+
[cdkPopoverEditColspan]="{after: 2}">
44+
{{person.firstName}}
45+
46+
<span *cdkRowHoverContent>
47+
<button cdkEditOpen>Edit</button>
48+
</span>
49+
</td>
50+
51+
<td [cdkPopoverEdit]="nameEdit"
52+
[cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
53+
[cdkPopoverEditColspan]="{before: 1, after: 1}">
54+
{{person.middleName}}
55+
56+
<span *cdkRowHoverContent>
57+
<button cdkEditOpen>Edit</button>
58+
</span>
59+
</td>
60+
61+
<td [cdkPopoverEdit]="nameEdit"
62+
[cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
63+
[cdkPopoverEditColspan]="{before: 2}">
64+
{{person.lastName}}
65+
66+
<span *cdkRowHoverContent>
67+
<button cdkEditOpen>Edit</button>
68+
</span>
69+
</td>
70+
</tr>
71+
}
7072
</table>

‎src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {Component} from '@angular/core';
22
import {NgForm, FormsModule} from '@angular/forms';
3-
import {NgFor} from '@angular/common';
43
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
54

65
export interface Person {
@@ -30,7 +29,7 @@ const PERSON_DATA: Person[] = [
3029
styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
3130
templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
3231
standalone: true,
33-
imports: [CdkPopoverEditModule, FormsModule, NgFor],
32+
imports: [CdkPopoverEditModule, FormsModule],
3433
})
3534
export class CdkPopoverEditCellSpanVanillaTableExample {
3635
readonly preservedValues = new WeakMap<Person, any>();

‎src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,42 +15,44 @@
1515
</form>
1616
</div>
1717
</ng-template>
18-
18+
1919
<tr>
2020
<th> No. </th>
2121
<th> Name </th>
2222
<th> Weight </th>
2323
<th> Symbol </th>
2424
</tr>
25-
26-
<tr *ngFor="let element of elements">
27-
<td> {{element.position}} </td>
28-
29-
<td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
30-
{{element.name}}
31-
32-
<!-- This edit is defined in the cell and can implicitly access element -->
33-
<ng-template #nameEdit>
34-
<div style="background-color: white; width: 100%">
35-
<form #f="ngForm"
36-
cdkEditControl
37-
cdkEditControlClickOutBehavior="submit"
38-
(ngSubmit)="onSubmitName(element, f)"
39-
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
40-
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
41-
<input [ngModel]="element.name" name="name" required>
42-
<br>
43-
<button type="submit">Confirm</button>
44-
</form>
45-
</div>
46-
</ng-template>
47-
</td>
4825

49-
<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
50-
cdkPopoverEditTabOut cdkEditOpen>
51-
{{element.weight}}
52-
</td>
26+
@for (element of elements; track element) {
27+
<tr>
28+
<td> {{element.position}} </td>
5329

54-
<td> {{element.symbol}} </td>
55-
</tr>
30+
<td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
31+
{{element.name}}
32+
33+
<!-- This edit is defined in the cell and can implicitly access element -->
34+
<ng-template #nameEdit>
35+
<div style="background-color: white; width: 100%">
36+
<form #f="ngForm"
37+
cdkEditControl
38+
cdkEditControlClickOutBehavior="submit"
39+
(ngSubmit)="onSubmitName(element, f)"
40+
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
41+
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
42+
<input [ngModel]="element.name" name="name" required>
43+
<br>
44+
<button type="submit">Confirm</button>
45+
</form>
46+
</div>
47+
</ng-template>
48+
</td>
49+
50+
<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
51+
cdkPopoverEditTabOut cdkEditOpen>
52+
{{element.weight}}
53+
</td>
54+
55+
<td> {{element.symbol}} </td>
56+
</tr>
57+
}
5658
</table>

‎src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {Component} from '@angular/core';
22
import {NgForm, FormsModule} from '@angular/forms';
3-
import {NgFor} from '@angular/common';
43
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
54

65
export interface PeriodicElement {
@@ -41,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
4140
styleUrls: ['cdk-popover-edit-tab-out-vanilla-table-example.css'],
4241
templateUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.html',
4342
standalone: true,
44-
imports: [CdkPopoverEditModule, FormsModule, NgFor],
43+
imports: [CdkPopoverEditModule, FormsModule],
4544
})
4645
export class CdkPopoverEditTabOutVanillaTableExample {
4746
readonly preservedNameValues = new WeakMap<PeriodicElement, any>();

‎src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,51 +19,53 @@
1919
</form>
2020
</div>
2121
</ng-template>
22-
22+
2323
<tr>
2424
<th> No. </th>
2525
<th> Name </th>
2626
<th> Weight </th>
2727
<th> Symbol </th>
2828
</tr>
29-
30-
<tr *ngFor="let element of elements">
31-
<td> {{element.position}} </td>
32-
33-
<td [cdkPopoverEdit]="nameEdit">
34-
{{element.name}}
35-
36-
<!-- This edit is defined in the cell and can implicitly access element -->
37-
<ng-template #nameEdit>
38-
<div style="background-color: white; width: 100%">
39-
<form #f="ngForm"
40-
cdkEditControl
41-
(ngSubmit)="onSubmitName(element, f)"
42-
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
43-
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
44-
Edit a:
45-
<input [ngModel]="element.name" name="name" required>
46-
<br>
47-
<button type="submit">Confirm</button>
48-
<button cdkEditRevert>Revert</button>
49-
<button cdkEditClose>Close</button>
50-
</form>
51-
</div>
52-
</ng-template>
5329

54-
<span *cdkRowHoverContent>
55-
<button cdkEditOpen>Edit</button>
56-
</span>
57-
</td>
30+
@for (element of elements; track element) {
31+
<tr>
32+
<td> {{element.position}} </td>
5833

59-
<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
60-
{{element.weight}}
61-
62-
<span *cdkRowHoverContent>
63-
<button cdkEditOpen>Edit</button>
64-
</span>
65-
</td>
34+
<td [cdkPopoverEdit]="nameEdit">
35+
{{element.name}}
6636

67-
<td> {{element.symbol}} </td>
68-
</tr>
37+
<!-- This edit is defined in the cell and can implicitly access element -->
38+
<ng-template #nameEdit>
39+
<div style="background-color: white; width: 100%">
40+
<form #f="ngForm"
41+
cdkEditControl
42+
(ngSubmit)="onSubmitName(element, f)"
43+
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
44+
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
45+
Edit a:
46+
<input [ngModel]="element.name" name="name" required>
47+
<br>
48+
<button type="submit">Confirm</button>
49+
<button cdkEditRevert>Revert</button>
50+
<button cdkEditClose>Close</button>
51+
</form>
52+
</div>
53+
</ng-template>
54+
55+
<span *cdkRowHoverContent>
56+
<button cdkEditOpen>Edit</button>
57+
</span>
58+
</td>
59+
60+
<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
61+
{{element.weight}}
62+
63+
<span *cdkRowHoverContent>
64+
<button cdkEditOpen>Edit</button>
65+
</span>
66+
</td>
67+
68+
<td> {{element.symbol}} </td>
69+
</tr>
70+
}
6971
</table>

‎src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {Component} from '@angular/core';
22
import {NgForm, FormsModule} from '@angular/forms';
3-
import {NgFor} from '@angular/common';
43
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
54

65
export interface PeriodicElement {
@@ -41,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
4140
styleUrls: ['cdk-popover-edit-vanilla-table-example.css'],
4241
templateUrl: 'cdk-popover-edit-vanilla-table-example.html',
4342
standalone: true,
44-
imports: [CdkPopoverEditModule, FormsModule, NgFor],
43+
imports: [CdkPopoverEditModule, FormsModule],
4544
})
4645
export class CdkPopoverEditVanillaTableExample {
4746
readonly preservedNameValues = new WeakMap<PeriodicElement, any>();

‎src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.html

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,48 @@ <h3><code>native input</code></h3>
55
[checked]="allToggler.checked | async"
66
[indeterminate]="allToggler.indeterminate | async"
77
(click)="allToggler.toggle($event)">
8-
<li *ngFor="let item of data">
9-
<input type="checkbox" cdkSelectionToggle #toggler="cdkSelectionToggle" [cdkSelectionToggleValue]="item"
10-
[checked]="toggler.checked | async" (click)="toggler.toggle()">
11-
{{item}}
12-
</li>
8+
@for (item of data; track item) {
9+
<li>
10+
<input type="checkbox" cdkSelectionToggle #toggler="cdkSelectionToggle" [cdkSelectionToggleValue]="item"
11+
[checked]="toggler.checked | async" (click)="toggler.toggle()">
12+
{{item}}
13+
</li>
14+
}
1315
</ul>
1416

1517
<h3><code>mat-checkbox</code></h3>
1618
Selected: {{selected2}}
1719
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="true" (cdkSelectionChange)="selected2 = getCurrentSelected($event)">
1820
<mat-checkbox cdkSelectAll #toggle1="cdkSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
19-
<li *ngFor="let item of data">
20-
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
21-
{{item}}
22-
</li>
21+
@for (item of data; track item) {
22+
<li>
23+
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
24+
{{item}}
25+
</li>
26+
}
2327
</ul>
2428

2529
<h3><code>Single select with mat-checkbox</code></h3>
2630
Selected: {{selected3}}
2731
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="false" (cdkSelectionChange)="selected3 = getCurrentSelected($event)">
28-
<li *ngFor="let item of data">
29-
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
30-
{{item}}
31-
</li>
32+
@for (item of data; track item) {
33+
<li>
34+
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
35+
{{item}}
36+
</li>
37+
}
3238
</ul>
3339

3440
<h3><code>with trackBy</code></h3>
3541
Selected: {{selected4}}
3642
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="true" [trackBy]="trackByFn" (cdkSelectionChange)="selected4 = getCurrentSelected($event)">
3743
<mat-checkbox cdkSelectAll #toggle2="cdkSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
38-
<li *ngFor="let item of data; index as i; trackBy: trackByFn">
39-
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item" [cdkSelectionToggleIndex]="i"></mat-checkbox>
40-
{{item}}
41-
</li>
44+
@for (item of data; track trackByFn($index)) {
45+
<li>
46+
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item" [cdkSelectionToggleIndex]="$index"></mat-checkbox>
47+
{{item}}
48+
</li>
49+
}
4250
</ul>
4351

4452
<button (click)="changeElementName()">Change element names and the already selected stays</button>

0 commit comments

Comments
 (0)