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

I am getting an array with MatListOption as values. Don't know how to extract the actual values. — Abhay Kumar, Sep 12 '18 at 06:06
Solution you mentioned works for Angular 8, Materials 8 too..Thanks — kumarabhishek, Jun 14 '19 at 12:31

score 11 · Answer 1 · edited Dec 02 '18 at 03:46

11

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

edited Dec 02 '18 at 03:46

Aray Karjauv

2,679
2
26
44

answered Sep 12 '18 at 06:41

Chellappan வ

23,645
3
29
60

This didn't work. Please note this is for Angular 6. I have edited the question with my code. Please check. – Abhay Kumar Sep 13 '18 at 03:22
1

Works in angular 11 – Eli Feb 16 '21 at 12:17

score 2 · Answer 2 · answered Mar 01 '22 at 15:21

2

This solution is better

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

answered Mar 01 '22 at 15:21

Rafik Belkadi

146
1
6

score 1 · Answer 3 · edited Jul 11 '23 at 02:29

1

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 the selected array in readingTypesSelected,

readingTypesSelected is mentioned in [(ngModel)]="readingTypesSelected"

edited Jul 11 '23 at 02:29

Duck Ling

1,577
13
20

answered Jun 25 '20 at 18:13

Imran Muhammad

556
5
7

score 1 · Answer 4 · answered Jul 05 '20 at 12:13

<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

score 0 · Accepted Answer · answered Sep 12 '18 at 06:22

0

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

Now you can get selected values in console.

answered Sep 12 '18 at 06:22

Chintan Kukadiya

784
5
16

2

I am not able to get the code from stackblitz. Can you please paste the code here? – Abhay Kumar Sep 12 '18 at 06:40
Possibly this will be his stackblitz - https://stackblitz.com/edit/angular-selection – Gokul Mar 09 '20 at 07:10
and a possible duplicate of this https://stackblitz.com/edit/angular-get-selected-items – Gokul Mar 09 '20 at 07:10

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

5 Answers5