Angular: Conditional ngClass and ngStyle

Introduction

The most commonly used options to style Angular elements are ngClass and ngStyle which are core directives in Angular. To set an element style we can use ngStyle. To set an element class ngClass is used. Sometimes we need to apply some styles or classes conditionally if some condition is true or false. Let us study the use case and usage of both the core directives in detail.

ngClass

It adds or removes CSS classes on an element at run time(dynamically). The ngClass directive will accept an expression that will be used to identify which styles to apply at a given point of time. The decision is taken on the truthy value of the given expression. The CSS classes expression can be passed in the following ways:
  • a string - the CSS classes which are given as strings in ngClass are applied on the element directly.
  • an array - the CSS classes added as array elements also get applied by itself.
  • an object - the CSS classes which are given as keys are applied to the DOM element when the expression given as value evaluates to true. Otherwise, the given class given as key in the object will not be applied.
<div [ngClass]="'class1 class2'"></div> <!--passed as a string-->

<div [ngClass]="['class1', 'class2']"></div> <!--passed as an array-->

<div [ngClass]="{'class1': true, 'class2': false}"></div> <!--passed as an object-->

More examples

When we are working with object literal, the keys are the classes which are applied to the element if the expression passed as value evaluates to true. 
[ngClass]="{'pointer':person.name === 'Kartik'}"
We can write multiple classes using ngClass conditionally to be added on elements.
<div>NgClass</div>
<ul *ngFor="let emp of employee">
  <li [ngClass]="{
    'text-success':emp.country === 'India',
    'text-primary':emp.country === 'US',
    'text-danger':emp.country === 'China'
  }">{{ emp.name }} ({{ emp.country }})
  </li>
</ul>

Alternate Syntax

We can set or remove a class from an element in our HTML using input property binding called class. It is an extended syntax. [class.<class-name>]="the truthy expression".

<div>NgClass</div>
<ul *ngFor="let emp of employee">
  <li  [class.text-success] = " emp.country === 'India' "
        [class.text-primary] = " emp.country === 'US' "
        [class.text-danger] = " emp.country === 'China' "
  }">{{ emp.name }} ({{ emp.country }})
  </li>
</ul>

ngStyle

It is an attribute directive that updates styles for the containing HTML element. It lets us sets a given DOM element style properties. Styles are defined as key-value pairs. The key is the style name with an optional. suffix(Such as 'font-size.px'). The value is an expression to be evaluated. If the value of the expression is null, the corresponding style will not be applied to the element.
<element [ngStyle]="{'font-style': styleExp}">...</element>
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
<some-element [ngStyle]="objExp">...</some-element>

The ngStyle expression can be written as follows:

<div [ngStyle]="{'color':employee.country === 'India' ? 'orange' : 'red' }"></<div>

Alternative Syntax

We can also set individual style properties using the [style<property>] which is written as
[style.<style-name>]="value".
<ul *ngFor="let emp of employee">
  <li [style.color]="red">{{ emp.name }} ({{ emp.country }})
  </li>
</ul>

Comments