angularangular-materialangular-material-6

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

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 the component. I am trying to modify the solution given in this question, but it’s 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 the console:

Enter image description here

How do i extract actual values of selected options from this?

Solution:

The first two lines of template code should be (as given in the StackBlitz link in the accepted solution):

<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
      <mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">
Solution

  • I updated your StackBlitz code here.

    Now you can get the selected values in the console.