Current selected value in angular6 material mat-selection-list

Question

Working with Angular Material2 mat-selection-list, Able to identify whether current option is selected or non-selected[Boolean].

compnenent.html

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'>
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

component.ts

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  onSelection(e, v){
   console.error(e.option.selected,v); 
  }
}

e.option.selected notifies whether current option is selected or non-selected.

How to identify current selected value ? Tried with multiple combinations with ngModel and ngModelChange and click , nothing works for me.

https://stackblitz.com/edit/angular-eyjdfp-qgjhvd?file=app%2Flist-selection-example.ts

score 15 · Accepted Answer · answered Jun 01 '18 at 06:07

15

You can get current selected value by getting e.option.value of your selectionChange $event

component.ts

current_selected: string;

onSelection(e, v){
   this.current_selected = e.option.value;
}

component.html

<p>
  Current selected value: {{ current_selected }}
</p>

Bonus

You can list all selected items by calling property selected of shoes.selectedOptions.selected in the template.

component.html

<p>Selected:</p>
<ul>
  <li *ngFor="let i of shoes.selectedOptions.selected">
    {{ i.value }}
  </li>
</ul>

Working Demo

answered Jun 01 '18 at 06:07

Shift 'n Tab

8,808
12
73
117

4

I always get undefined for e.option.value using ang 7/mat 7 – Post Impatica Jul 02 '19 at 15:59
same here, I am also getting undefined for e.option.value – Shubham Arya Sep 23 '19 at 05:58

score 8 · Answer 2 · edited Jun 01 '18 at 09:51

Use the click event binding on the mat-list-option:

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
      <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe' (click)="getValue($event)">
        {{shoe}}
      </mat-list-option>
</mat-selection-list>

Component TypeScript:

getValue(event){
    console.log(event.target.parentNode.innerText);
}

score 4 · Answer 3 · answered Mar 06 '19 at 10:17

 <mat-selection-list class="addressList" #userAddressList>
          <mat-list-option *ngFor="let userAddress of userAddressesArray"
          (click)="onAddressSelection(userAddress)">
                  {{userAddress}}
                </mat-list-option>
              </mat-selection-list>
In TypeScript


  private onAddressSelection(selectedItem:any) {
   let  selectedOption = selectedItem;


  }

yglodt · Answer 4 · 2021-01-18T09:24:16.227

4

In recent Angular versions you should use options:

In your template:

<mat-selection-list [multiple]="false" (selectionChange)="selChange($event)">

In your class:

public selChange(e: MatSelectionListChange) {
    let selection = e.options[0].value;
}

edited Jan 18 '21 at 09:24

answered Jan 17 '21 at 21:56

yglodt

13,807
14
91
127

Make sure that you don't have **[(ngModel)]=** within your mat-selection-list element overriding your selectionChange from within the selChange method. – BluJ IT May 08 '21 at 01:21
This does't work. The e.options[0].value is always undefined. – Emanuele Benedetti Mar 07 '23 at 12:10

score 3 · Answer 5 · answered Oct 01 '19 at 03:15

I spent a good amount of time in finding a solution for this, but everything in vain... Fortunately enough I have come up with an idea for it, hope it helps.

----checkListItems is the array which consists of all the items that I want to publish----

component.html

<mat-selection-list #checkItems (selectionChange)="onSelection($event, checkItems.selectedOptions.selected)">
  <mat-list-option *ngFor="let check of checklistItems">
    {{check.label}}
  </mat-list-option>
</mat-selection-list>

In mat-selection-list I am sending an event and the value of all the selected items, so this value that I am talking about is actually an array of MatSelectionList. And I have to parse the value of my selected item in my .ts file.

component.ts

selectedOptions = [];
checkedValues = [];

onSelection(event, value) {
    this.checkedValues = [];
    this.selectedOptions = value;
    for (let i = 0; i < this.selectedOptions.length; i++) {
      this.checkedValues.push(this.selectedOptions[i]._text.nativeElement.innerText);
    }
}

So, I have an array called checkedValues, which I am deleting every time a selection or deselection is being done, as MatSelectionList array (in this case my value array) will consist of all the items that are selected. So if you won't delete it every time, it will keep on appending the same item every time it is selected. (You can try this by removing the line this.checkedValues=[] and printing the checkedValues array after for loop gets finished).

Hope this helps!!

rather than use `_text.nativeElement.innerText` you could add `[value]='check.label'` to your `mat-list-option` then you can use `value.map( m => m.value)` — Steve Drake, Jun 24 '20 at 07:45

score 1 · Answer 6 · answered Jun 01 '18 at 05:37

In your component .ts :

export class ListSelectionExample {
 typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

 selectedShoes;

 onSelection(e, v){
   this.selectedShoes = v.selected.map(item => item.value);

  console.error(e.option.selected,v); 
 }
}

Current selected value in angular6 material mat-selection-list

6 Answers6

component.html

component.ts

Linked