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

Solution 1

I updated your stackblitz code here https://angular-selection.stackblitz.io

Now you can get selected values in console.

Solution 2

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

Solution 3

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"

Comments

[Abhay Kumar]

I am not able to get the code from stackblitz. Can you please paste the code here?

[Abhay Kumar]

This didn't work. Please note this is for Angular 6. I have edited the question with my code. Please check.

[Gokul]

Possibly this will be his stackblitz - stackblitz.com/edit/angular-selection

[Gokul]

and a possible duplicate of this stackblitz.com/edit/angular-get-selected-items

[Eli]

Works in angular 11