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

7
votes

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:

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 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">
4
angularangular-materialangular-material-6
are you getting any error? - Chellappan வ
I am getting an array with MatListOption as values. Don't know how to extract the actual values. - Abhay Kumar
Solution you mentioned works for Angular 8, Materials 8 too..Thanks - kumarabhishek

4 Answers

7
votes

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

1
votes

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"

0
votes

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

Now you can get selected values in console.

0
votes
<mat-selection-list #products [(ngModel)]="selectedProducts">
    <mat-list-option *ngFor="let eachProduct of allProducts;" [value]="eachProduct">
        {{eachProduct.name}}
    </mat-list-option>
</mat-selection-list>

{{selectedProducts|json}}

Tested in Angular 10. The main part is [value]="eachProduct" other wise it will show null