CODEWITHSUNDEEP
angularangular-material
OddDev
OddDev

Reputation: 3734

Angular 2 Material - how to set the color of a toolbar conditionally

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

Answers (1)

Igor Janković
Igor Janković

Reputation: 5532

You have to use attribute binding:

<md-toolbar [color]="true ? 'warn' : null">

Upvotes: 24

Related Questions