How to access selection options in material mat-selection-list
Start by adding a value
for strings or ngValue
for objects to your options.
<mat-list-option *ngFor="let pizza of pizzas" [value]="pizza"> or [ngValue]="pizza"
Option 1: Using selectionChange
Pass the array of the selected MatListOptions to your function.
<mat-selection-list #pizzaList (selectionChange)="onGroupsChange(pizzaList.selectedOptions.selected)">
<mat-list-option *ngFor="let pizza of pizzas" [value]="pizza">
{{pizza}}
</mat-list-option>
</mat-selection-list>
You will get an array that contains the selected options in the order they were selected.
import { MatListOption } from '@angular/material/list'
onGroupsChange(options: MatListOption[]) {
// map these MatListOptions to their values
console.log(options.map(o => o.value));
}
Option 2: Using ngModel
As @Eliseo commented you could use ngModel
for 2-way data binding if you only want access to the selected data but don't need to be notified about changes.
<mat-selection-list #pizzaList [(ngModel)]="selectedPizzas">
<mat-list-option *ngFor="let pizza of pizzas" [value]="pizza">
{{pizza}}
</mat-list-option>
</mat-selection-list>
selectedPizzas: string[]; // this array will contain the selected pizzas
To additionally get notified about changes you could add ngModelChange
:
<mat-selection-list #pizzaList [(ngModel)]="selectedPizzas" (ngModelChange)="onGroupsChange($event)">
You will get an array that contains the selected options' values in the order they appear in the input array pizzas
(not in the order they were selected as with selectionChange
).
onGroupsChange(selectedPizzas: string[]) {
console.log(selectedPizzas);
}
Well, IMHO, the right way seems to be using the selectedOptions
property of the MatSelectionList
.
selectedOptions: SelectionModel<MatListOption>
In your example you're accessing a private property.
You can check out the sources of SelectionModel
to see what you're able to use.
The right method seems to be
/** Selected values. */
get selected(): T[] {
if (!this._selected) {
this._selected = Array.from(this._selection.values());
}
return this._selected;
}
The event is typed as MatSelectionListChange
, so:
onPizzasChange(event: MatSelectionListChange) {
console.log("selectedOptions:", event.source.selectedOptions.selected();
};
PS: unlike the other answer, I prefer keeping the template as clean as possible.
All the properties accesses might be done inside the component. Which is also easier to read and understand.