Components: Button hide error

[csotomon]

Bug, feature request, or proposal:

[hidden] property doesn't work in Buttons

What is the expected behavior?

Hide the button when the [hidden] property is true

What is the current behavior?

When the property is true it is not hiding the button

What are the steps to reproduce?

http://plnkr.co/edit/qUHhZElRoOXs2xKlYjyb

What is the use-case or motivation for changing an existing behavior?

I want to have just one button to show or hide a card content

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

"@angular/core": "^4.0.0",
"@angular/material": "^2.0.0-beta.8",
Chrome Browser

[willshowell]

Just use *ngIf

[crisbeto]

The hidden attribute sets display: none through the user agent styles, which makes it really low specificity. Material sets buttons to display: inline-block through a class selector which ends up overriding the native styling. You can either use *ngIf, or add this somewhere in your stylesheet to guarantee that it can't be overridden:

[hidden] {
  display: none !important;
}

[angular-automatic-lock-bot[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._}