selectionChange property is not firing event in angular class component

Question

I was trying to implement angular MatSelectionList and tried to listen selected option event using API selectionChange , but its not firing any event .

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

Am i doing something wrong or anything broke while releasing to angular 6 ?

Using : Angular 6.0.1 version

Chrome Browser

Solution

The component behavior changed in the 6.0.0-beta.5 of @angular/material :

list: selectionChange on the MatListOption, which was deprecated in 5.0.0 has been removed. Use selectionChange on the MatSelectionList instead.

You need to apply selectionChange on your mat-selection-list like this :

<mat-selection-list (selectionChange)="onSelection($event)" #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes" >
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

Here is an edit of your stackblitz.

Comments

[Anil Arya]

In angular5 , this used to work with mat-list-option element

[ibenjelloun]

You could use mat-checkbox, here is an example : stackblitz.com/edit/stackoverflow-50363834-2

[Anil Arya]

Is it not possible to capture selected value from mat-selection-list options ?

[Akash Srivastav]

@AnilKumarArya You can get the selected value using console.log(event.value);