While a [md-button] is nested inside a [md-card] either [md-card] or nested in [md-card-actions] the (click) event is not called.
The click event should fire.
The click event does not fire.
Place a button with a (click)="func()" attribute inside a [md-card] element and it will not call the event.
Plunker example
Angular 2 - 2.2.0
Material - 2.0.0-alpha.10
OS - windows 10
Chrome
I was messing around and also found that if you move the (click)="func()" from
@crisbeto I took a quick look at the Plunker and something seems amiss, but I'm not sure where the problem lies.
It doesn't look like this is an issue. The click event isn't being called, because both the md-button
and the md-card
have a click handler. When you click the button, the click event propagates up to the card which then resets the value. If you look at the HTML:
<md-card (click)="setTest('Home')"> <!-- Click event propagates to here, now the value is reset back to 'Home' -->
<!-- some content -->
<md-card-actions *ngIf="test === 'Home'">
<button md-button (click)="setTest('NA');">THIS WONT CALL CLICK EVENT</button> <!-- This will be called first when click. The test value is now at 'NA'-->
</md-card-actions>
</md-card>
@dzrust, you can avoid this by either removing the click event from the card or stopping the event propagation:
<md-card (click)="setTest('Home')">
<!-- some content -->
<md-card-actions *ngIf="test === 'Home'">
<button md-button (click)="setTest('NA'); $event.stopPropagation()">This works now</button>
</md-card-actions>
</md-card>
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._
Most helpful comment
It doesn't look like this is an issue. The click event isn't being called, because both the
md-button
and themd-card
have a click handler. When you click the button, the click event propagates up to the card which then resets the value. If you look at the HTML:@dzrust, you can avoid this by either removing the click event from the card or stopping the event propagation: