Table of Contents

It's easy to bind inline style in your Angular 2 templates. Here's how you would bind a single style value for example:

				
					
<p [style.background-color]="'darkorchid'">

  Quite something!

</p>

You can also specify the unit, here for example we set the unit in <^>em<^>, but <^>px<^>, <^>%<^> or <^>rem<^> could also be used:

				
					
&lt;p [style.font-size.em]="'3'"&gt;

  A paragraph at 3em!

&lt;/p&gt;

And here's how you would conditionally set a style value depending on a property of the component:

				
					
&lt;p [style.font-size.px]="isImportant ? '30' : '16'"&gt;

  Some text that may be important.

&lt;/p&gt;

NgStyle for multiple values

style illustration for: NgStyle for multiple values

Simple style binding is great for single values, but for applying multiple styles the easiest way is to use NgStyle:

				
					
&lt;p [ngStyle]="myStyles"&gt;

  You say tomato, I say tomato

&lt;/p&gt;

And then myStyles would be a property in the component that contains an object with css property names as the keys, like this:

				
					
myStyles = {

'background-color': 'lime',

'font-size': '20px',

'font-weight': 'bold'

}

Or it could be provided inline like this:

				
					
&lt;p [ngStyle]="{'background-color': 'lime',

    'font-size': '20px',

    'font-weight': 'bold'}"&gt;

  You say tomato, I say tomato

&lt;/p&gt;

Or the object can be the return value of a method:

				
					
&lt;p [ngStyle]="setMyStyles()"&gt;

  You say tomato, I say tomato

&lt;/p&gt;

In the associated component class

				
					
setMyStyles() {

  let styles = {

    'background-color': this.user.isExpired ? 'red' : 'transparent',

    'font-weight': this.isImportant ? 'bold' : 'normal'

  };

  return styles;

}

See Also