Skip to content

Commit

Permalink
docs(multiple): switch docs examples to new control flow
Browse files Browse the repository at this point in the history 
Switches the docs examples to use the new control flow instead of `*ngIf`, `*ngFor` and `*ngSwitch`.
  • Loading branch information
@crisbeto
crisbeto committed Nov 6, 2023
1 parent 1bfd4ae commit 99b62ba
Show file tree
Hide file tree
Showing 201 changed files with 1,036 additions and 1,045 deletions.
21 changes: 10 additions & 11 deletions guides/creating-a-custom-stepper-using-the-cdk-stepper.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,11 @@ This is the HTML template of our custom stepper component:

<footer class="step-navigation-bar">
<button class="nav-button" cdkStepperPrevious>&larr;</button>
<button
class="step"
*ngFor="let step of steps; let i = index;"
[ngClass]="{'active': selectedIndex === i}"
(click)="onClick(i)"
>
Step {{i + 1}}
</button>
@for (step of steps; track step) {
<button class="step" [class.active]="selectedIndex === $index" (click)="onClick(i)">
Step {{i + 1}}
</button>
}
<button class="nav-button" cdkStepperNext>&rarr;</button>
</footer>
</section>
Expand Down Expand Up @@ -117,9 +114,11 @@ If you want to iterate over your steps and use your own custom component you can

```html
<app-custom-stepper>
<cdk-step *ngFor="let step of mySteps; let stepIndex = index">
<my-step-component [step]="step"></my-step-component>
</cdk-step>
@for (step of mySteps; track step) {
<cdk-step>
<my-step-component [step]="$index"></my-step-component>
</cdk-step>
}
</app-custom-stepper>
```

Expand Down
70 changes: 36 additions & 34 deletions ...opover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,45 +26,47 @@
</form>
</div>
</ng-template>

<tr>
<th> No. </th>
<th> First name </th>
<th> Middle name </th>
<th> Last name </th>
</tr>

<tr *ngFor="let person of persons">
<td> {{person.id}} </td>

<td [cdkPopoverEdit]="nameEdit"
[cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
[cdkPopoverEditColspan]="{after: 2}">
{{person.firstName}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>

<td [cdkPopoverEdit]="nameEdit"
[cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
[cdkPopoverEditColspan]="{before: 1, after: 1}">
{{person.middleName}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>

<td [cdkPopoverEdit]="nameEdit"
[cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
[cdkPopoverEditColspan]="{before: 2}">
{{person.lastName}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>
</tr>
@for (person of persons; track person) {
<tr>
<td> {{person.id}} </td>

<td [cdkPopoverEdit]="nameEdit"
[cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
[cdkPopoverEditColspan]="{after: 2}">
{{person.firstName}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>

<td [cdkPopoverEdit]="nameEdit"
[cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
[cdkPopoverEditColspan]="{before: 1, after: 1}">
{{person.middleName}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>

<td [cdkPopoverEdit]="nameEdit"
[cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
[cdkPopoverEditColspan]="{before: 2}">
{{person.lastName}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>
</tr>
}
</table>
3 changes: 1 addition & 2 deletions ...-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {NgForm, FormsModule} from '@angular/forms';
import {NgFor} from '@angular/common';
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';

export interface Person {
Expand Down Expand Up @@ -30,7 +29,7 @@ const PERSON_DATA: Person[] = [
styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
standalone: true,
imports: [CdkPopoverEditModule, FormsModule, NgFor],
imports: [CdkPopoverEditModule, FormsModule],
})
export class CdkPopoverEditCellSpanVanillaTableExample {
readonly preservedValues = new WeakMap<Person, any>();
Expand Down
62 changes: 32 additions & 30 deletions ...dk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,44 @@
</form>
</div>
</ng-template>

<tr>
<th> No. </th>
<th> Name </th>
<th> Weight </th>
<th> Symbol </th>
</tr>

<tr *ngFor="let element of elements">
<td> {{element.position}} </td>

<td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
{{element.name}}

<!-- This edit is defined in the cell and can implicitly access element -->
<ng-template #nameEdit>
<div style="background-color: white; width: 100%">
<form #f="ngForm"
cdkEditControl
cdkEditControlClickOutBehavior="submit"
(ngSubmit)="onSubmitName(element, f)"
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
<input [ngModel]="element.name" name="name" required>
<br>
<button type="submit">Confirm</button>
</form>
</div>
</ng-template>
</td>

<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
cdkPopoverEditTabOut cdkEditOpen>
{{element.weight}}
</td>
@for (element of elements; track element) {
<tr>
<td> {{element.position}} </td>

<td> {{element.symbol}} </td>
</tr>
<td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
{{element.name}}

<!-- This edit is defined in the cell and can implicitly access element -->
<ng-template #nameEdit>
<div style="background-color: white; width: 100%">
<form #f="ngForm"
cdkEditControl
cdkEditControlClickOutBehavior="submit"
(ngSubmit)="onSubmitName(element, f)"
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
<input [ngModel]="element.name" name="name" required>
<br>
<button type="submit">Confirm</button>
</form>
</div>
</ng-template>
</td>

<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
cdkPopoverEditTabOut cdkEditOpen>
{{element.weight}}
</td>

<td> {{element.symbol}} </td>
</tr>
}
</table>
3 changes: 1 addition & 2 deletions .../cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {NgForm, FormsModule} from '@angular/forms';
import {NgFor} from '@angular/common';
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';

export interface PeriodicElement {
Expand Down Expand Up @@ -41,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
styleUrls: ['cdk-popover-edit-tab-out-vanilla-table-example.css'],
templateUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.html',
standalone: true,
imports: [CdkPopoverEditModule, FormsModule, NgFor],
imports: [CdkPopoverEditModule, FormsModule],
})
export class CdkPopoverEditTabOutVanillaTableExample {
readonly preservedNameValues = new WeakMap<PeriodicElement, any>();
Expand Down
78 changes: 40 additions & 38 deletions ...l/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,51 +19,53 @@
</form>
</div>
</ng-template>

<tr>
<th> No. </th>
<th> Name </th>
<th> Weight </th>
<th> Symbol </th>
</tr>

<tr *ngFor="let element of elements">
<td> {{element.position}} </td>

<td [cdkPopoverEdit]="nameEdit">
{{element.name}}

<!-- This edit is defined in the cell and can implicitly access element -->
<ng-template #nameEdit>
<div style="background-color: white; width: 100%">
<form #f="ngForm"
cdkEditControl
(ngSubmit)="onSubmitName(element, f)"
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
Edit a:
<input [ngModel]="element.name" name="name" required>
<br>
<button type="submit">Confirm</button>
<button cdkEditRevert>Revert</button>
<button cdkEditClose>Close</button>
</form>
</div>
</ng-template>

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>
@for (element of elements; track element) {
<tr>
<td> {{element.position}} </td>

<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
{{element.weight}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>
<td [cdkPopoverEdit]="nameEdit">
{{element.name}}

<td> {{element.symbol}} </td>
</tr>
<!-- This edit is defined in the cell and can implicitly access element -->
<ng-template #nameEdit>
<div style="background-color: white; width: 100%">
<form #f="ngForm"
cdkEditControl
(ngSubmit)="onSubmitName(element, f)"
[cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
(cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
Edit a:
<input [ngModel]="element.name" name="name" required>
<br>
<button type="submit">Confirm</button>
<button cdkEditRevert>Revert</button>
<button cdkEditClose>Close</button>
</form>
</div>
</ng-template>

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>

<td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
{{element.weight}}

<span *cdkRowHoverContent>
<button cdkEditOpen>Edit</button>
</span>
</td>

<td> {{element.symbol}} </td>
</tr>
}
</table>
3 changes: 1 addition & 2 deletions ...tal/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {NgForm, FormsModule} from '@angular/forms';
import {NgFor} from '@angular/common';
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';

export interface PeriodicElement {
Expand Down Expand Up @@ -41,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
styleUrls: ['cdk-popover-edit-vanilla-table-example.css'],
templateUrl: 'cdk-popover-edit-vanilla-table-example.html',
standalone: true,
imports: [CdkPopoverEditModule, FormsModule, NgFor],
imports: [CdkPopoverEditModule, FormsModule],
})
export class CdkPopoverEditVanillaTableExample {
readonly preservedNameValues = new WeakMap<PeriodicElement, any>();
Expand Down
42 changes: 25 additions & 17 deletions ...ts-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,48 @@ <h3><code>native input</code></h3>
[checked]="allToggler.checked | async"
[indeterminate]="allToggler.indeterminate | async"
(click)="allToggler.toggle($event)">
<li *ngFor="let item of data">
<input type="checkbox" cdkSelectionToggle #toggler="cdkSelectionToggle" [cdkSelectionToggleValue]="item"
[checked]="toggler.checked | async" (click)="toggler.toggle()">
{{item}}
</li>
@for (item of data; track item) {
<li>
<input type="checkbox" cdkSelectionToggle #toggler="cdkSelectionToggle" [cdkSelectionToggleValue]="item"
[checked]="toggler.checked | async" (click)="toggler.toggle()">
{{item}}
</li>
}
</ul>

<h3><code>mat-checkbox</code></h3>
Selected: {{selected2}}
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="true" (cdkSelectionChange)="selected2 = getCurrentSelected($event)">
<mat-checkbox cdkSelectAll #toggle1="cdkSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
<li *ngFor="let item of data">
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
{{item}}
</li>
@for (item of data; track item) {
<li>
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
{{item}}
</li>
}
</ul>

<h3><code>Single select with mat-checkbox</code></h3>
Selected: {{selected3}}
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="false" (cdkSelectionChange)="selected3 = getCurrentSelected($event)">
<li *ngFor="let item of data">
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
{{item}}
</li>
@for (item of data; track item) {
<li>
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
{{item}}
</li>
}
</ul>

<h3><code>with trackBy</code></h3>
Selected: {{selected4}}
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="true" [trackBy]="trackByFn" (cdkSelectionChange)="selected4 = getCurrentSelected($event)">
<mat-checkbox cdkSelectAll #toggle2="cdkSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
<li *ngFor="let item of data; index as i; trackBy: trackByFn">
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item" [cdkSelectionToggleIndex]="i"></mat-checkbox>
{{item}}
</li>
@for (item of data; track trackByFn($index)) {
<li>
<mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item" [cdkSelectionToggleIndex]="$index"></mat-checkbox>
{{item}}
</li>
}
</ul>

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

0 comments on commit 99b62ba

Please sign in to comment.