bug(MdListOption/MdSelectionList) selectChange does not fire on MdListOption

[thomastoye]

Bug, feature request, or proposal:

The selectChange output on md-list-option does not work (never called) when selecting options.

What is the expected behavior?

When clicking on an md-list-option, selectChange is called.

What is the current behavior?

When clicking on an md-list-option, selectChange is not called.

What are the steps to reproduce?

Here is a Plunker showing this (minimal changes from the Angular Material docs example): https://plnkr.co/edit/YPB47YfYjriGM7FA4lnX?p=preview

Here are the relevant sections:

-- File: list-selection-example.html
<md-selection-list #shoes>
  <md-list-option *ngFor="let shoe of typesOfShoes" (selectChange)="change($event)">
    {{shoe}}
  </md-list-option>
</md-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>

-- File: list-selection-example.ts
@Component({
  selector: 'list-selection-example',
  styleUrls: ['list-selection-example.css'],
  templateUrl: 'list-selection-example.html',
})
export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  
  public change() {
    console.log('This should fire on select change')
  }
}

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chromium on Xubuntu: Version 61.0.3163.79 (Official Build) Built on Ubuntu , running on Ubuntu 17.04 (64-bit)

Also tested on Firefox 55.0.2 (64-bit) on Xubuntu, not working either.

Is there anything else we should know?

I'm trying to use the md-selection-list in my app. In this child component, I want to emit whenever the user makes a change in selections. Interested to hear what I'm doing wrong or a work-around.

<md-selection-list *ngIf="day && day.shifts" #selectionList>
  <md-list-option
    *ngFor="let shift of sort(day.shifts)"
    [value]="shift"
    (selectChange)="selectChange(selectionList.selectedOptions)"
  >
</md-selection-list>

[thomastoye]

As for the problem I was trying to solve, I solved it more elegantly using the following (which works):

  ngOnInit() {
    this.selectionList.selectedOptions.onChange.subscribe(list => {
      this.selectedShiftsUpdated.emit(this.selectionList.selectedOptions.selected.map(option => option.value));
    });
  }

This bug remains though.

[josephperrott]

This is actually a duplicate and will be fixed by #6901

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}