Hello Readers,

Now a days creating dynamic CSS in web application is very popular. Angular2 provides a way to implement dynamic CSS and CSS classes with template syntax and also provides some built in directives. Here we will have a look on the basic introduction of ngStyle and ngClass.

First we will look at the property syntax which are new in the Angular2. Property syntax makes the access of elements and component property very easy.

For Example :

<div [style.color]="red">Style using property syntax.</div>

In the above example you will see we are directly access the style property of our div element.

We can also add  CSS class to an element by using Angular2 property syntax.
For Example :

<div [className]="'red'">CSS class using property syntax.</div>

Now lets look at the Angular2 built in directives. In Angular1 we have some special directives such as ng-style and nd-class. But Angular2 built in directives help to solve the complex problems. This time we are talking about ngStyle and ngClass directives.

ngStyle : We can style multiple property to an element.
For Example :

<div [ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}">
  style using ngStyle
</div>

ngClass : ngClass directive provides classes on our components and elements. It allows to add multiple classes on a component and HTML element.

For Example :

<div [ngClass]="{'small-text': true, 'red': true}">Using ngClass</div>

Hope this will help you :)