7. Class Binding

Class Binding

When we want to bind CSS classes either from typescript or class OR based on conditionals we can go with the concept of Class Binding.

Class binding in angular can be defined in as follows :

<element [ngClass]="condition or ternary or multiple CSS classes"> </element>

ng class can be used in many different ways in angular which are as follows:

1. ngClass with ternary operator: 

<element [ngClass]="condition ? 'class1' : 'class2'"> </element>

from above when condition is true 'class1' will be applied to the element else 'class2' will be applied.

2. ngClass with condition in object format:

<element [ngClass]="{'className': condtion}"> </element>

When we have only one condition and one class to be applied we can use above syntax.

3. ngClass with multiple conditions in object format

<element [ngClass]="{'class1': condition1, 'class2': condition2 ..}"></element>

When multiple conditions in objects format.

4. ngClass with multiple conditions in array format

<element [ngClass]="[condition1 ? 'class1' : '',condition2 ? 'class2' : 'elseClass']">
</element>

When we have multiple conditions with multiple different class to be applied then use above.

5. Binding the class name as property binding 

<element [ngClass.className]="condition"></element>

When you have a condition and a class name to be applied based on condition we can even use as above.

6. Apply CSS class from typescript file:

HTML

<element [ngClass.className]="data"></element>

TS

data = 'active'

CSS

.active {
   color: 'blue'
}

From above active class is applied to the element from typescript or class variable to HTML from CSS file.
Sample example for all the above type's of ngClass
Create sample Component

ng g c sample --skipTests 

The above command creates 3 files as follows:

1. sample.component.html
2. sample.component.ts
3. sample.component.scss.

In sample.component.html

sam
<p class="blue">Hai this from normal class</p>

<p [ngClass]="true ? 'red' : ''"> Using ng class red will be applied</p>

<p class="normal-class" [ngClass]="true ? 'ng-class': ''">
Using ng class and class (class is always the priority)
</p>

<p [class.normal-class]="true">Class name with property binding </p>

<p [ngClass]="{'normal-class': true }">CSS class with object model </p>

<p [ngClass]="[true ? 'normal-class' : '', false ? '' : 'ng-class']">
Multiple classes with array format
</p>
<p [ngClass]="{'normal-class' :true  , 'ng-class': false}">
Multiple classes with object format. If condition is true it applies the 
class else wont apply any CSS class
</p>
<p [ngClass]="data">Classes from Typescript or class</p>

sample.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss']
})
export class SampleComponent {
  data = 'red';
}

sample.component.scss

.blue {
    color: blue;
}
.red {
    color: red;
}
.normal-class {
    font-size: 30px;
    color: red;
}
.ng-class {
    font-size: 18px;
    color: blue;
}

Sample output

Note :

1. When we have same properties applying through CSS normal class and ng class 
 then always it applies the normal class CSS.
2. When we have same properties used in ngclass array format then last CSS 
  class will be applied and remaining all will be applied as usual.