Reputation: 3734
I'm working with a Angular Material toolbar which can have three types of color: 'primary', 'accent', or 'warn'.
The color of a can be changed by using the color property. By default, toolbars use a neutral background color based on the current theme (light or dark). This can be changed to 'primary', 'accent', or 'warn'.
I want to change this color to "warn" if a specific condition exists. I've already tried the following things:
<md-toolbar color="warn">
Shows the warning color correctly.
<md-toolbar color="{{true ? 'warn' : null}}">
Shows the toolbar as if no color would have been set
<md-toolbar [attr.color]="true ? 'warn' : null">
Shows the toolbar as if no color would have been set
How am I supposed to set this?
Upvotes: 9
Views: 5289
Reputation: 5532
You have to use attribute binding:
<md-toolbar [color]="true ? 'warn' : null">
Upvotes: 24