md-button-raised buttons (click) not working inside of *ngFor

Bug, feature request, or proposal:

Bug <button md-raised-button>'s that are generated within a template via *ngFor do not register click event.

What is the expected behavior?

That when a md-raised-button with the (click) event is generated inside of ngFor it will be clickable or fire click event.

What is the current behavior?

Button will not respond to clicks at all. Removing md-raised-button from the element will allow the button to work as expected.

What are the steps to reproduce?

<div *ngFor="let value of someIterable; let i='index'">
  <button md-raised-button (click)="someFunction(value)">{{value}}</button>
</div>

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

“@angular/core”: “2.0.0”, “@angular/material”: “^2.0.0-alpha.9-3”, Chrome Version 53.0.2785.116 (64-bit) OSX Yosemeti 10.10.5 (14F1912)

[andrewseguin]

The issue here is that you are asking the array() function to return a new array each time change detection is run, which is building a new set of buttons each time. This happens so often while you are clicking that angular is unable to successfully evaluate the click handler.

Add a trackBy function that uses the object’s id so that the ngFor doesn’t recreate an element and you’ll see that everything works fine: http://plnkr.co/edit/0vYMY2Hv2OUWqZBe0nPf?p=preview

A better solution would be to make that array a property of your component rather than something dynamically built each time the function is called. You’ll get much better performance this way: http://plnkr.co/edit/VzA7igNhrt9ylG3lS5g7?p=preview

[fxck]

Can’t reproduce(http://plnkr.co/edit/qgCm0mRFCd09FWUM3Fin?p=preview).

Provide a plunk where it doesn’t work.

@zahlprish @jelbourn