src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html - main - githubmirror/components

src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html

53 строки2 KB

Kristiyan Kostadinov

docs(multiple): switch docs examples to new control flow

06 ноя 2023, 18:51

06 ноя 2023, 18:5199b62ba

<h3><code>native input</code></h3>
Selected: {{selected1}}
<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected1 = getCurrentSelected($event)">
  <input type="checkbox" matSelectAll #allToggler="matSelectAll"
      [checked]="allToggler.checked | async"
      [indeterminate]="allToggler.indeterminate | async"
      (click)="allToggler.toggle($event)">
  @for (item of data; track item) {
    <li>
      <input type="checkbox" matSelectionToggle #toggler="matSelectionToggle" [matSelectionToggleValue]="item"
        [checked]="toggler.checked | async" (click)="toggler.toggle()">
      {{item}}
    </li>
  }
</ul>

<h3><code>mat-checkbox</code></h3>
Selected: {{selected2}}
<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected2 = getCurrentSelected($event)">
  <mat-checkbox matSelectAll #toggle1="matSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
  @for (item of data; track item) {
  <li>
    <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
    {{item}}
  </li>
}
</ul>

<h3><code>Single select with mat-checkbox</code></h3>
Selected: {{selected3}}
<ul matSelection [dataSource]="data" [matSelectionMultiple]="false" (matSelectionChange)="selected3 = getCurrentSelected($event)">
  @for (item of data; track item) {
    <li>
      <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
      {{item}}
    </li>
  }
</ul>

<h3><code>with trackBy</code></h3>
Selected: {{selected4}}
<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" [trackBy]="trackByFn" (matSelectionChange)="selected4 = getCurrentSelected($event)">
  <mat-checkbox matSelectAll #toggle2="matSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
  @for (item of data; track trackByFn(i, item); let i = $index) {
    <li>
      <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item" [matSelectionToggleIndex]="i"></mat-checkbox>
      {{item}}
    </li>
  }
</ul>

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