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

Question

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?

Answer 1

You have to use attribute binding:

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