How do I get the list of all values selected from Angular material mat selection list in the component. The example given shows values to be displayed in the template but not in component. I am trying to modify the solution given in this question but its not working for me. Here is my current code:
Template:
<mat-selection-list #selected [(ngModel)]="readingTypesSelected" (ngModelChange)="onSelection($event)" >
<mat-list-option *ngFor="let readingType of readingTypes">
{{readingType.name}}
</mat-list-option>
</mat-selection-list>
Component:
onSelection(e, v) {
console.log(e);
console.log(v);
}
The following is getting logged to console:
How do i extract actual values of selected options from this?
Solution:
The first two lines of template code should be (as given in stackblitz link in accepted solution):
<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
<mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">
Try this
<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
{{shoe}}
</mat-list-option>
</mat-selection-list>
After binding [(ngModel)]="selectedOptions"
you can use selectedOptions
variable in your component which will have all selected items.
Example:https://stackblitz.com/edit/angular-hdmfwi
In your code value attribute is missing
Replace
<mat-list-option *ngFor="let readingType of readingTypes">
with
<mat-list-option *ngFor="let readingType of readingTypes" [value]="readingType">
and then get selected array in readingTypesSelected ,
readingTypesSelected is mentioned in [(ngModel)]="readingTypesSelected"
This solution is better
selectionChanged(event: MatSelectionListChange): void {
this.selected = event.options.filter(o => o.selected).map(o => o.value);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With