Getting list of selected values from Angular 6 mat-selection-list

Question

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">

Answer 1

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

Answer 2

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"

Answer 3

This solution is better

selectionChanged(event: MatSelectionListChange): void {
    this.selected = event.options.filter(o => o.selected).map(o => o.value);
}