Angular 8 Session 11 - Class Binding In Angular

Class Binding In Angular

* Class Binding is another form of data-binding, used to render classes dynamically.

* There are specifically 2 types of class binding we have in Angular.

Single Class Binding        Multiple Class Binding 

* Normally we used to have our class applied to elements without using any binding as below:

<input type=“text” value=“Welcome to SKMDotNet Angular” class=“bgColor”> 

* To add/remove classes to/from an element we are using Single Class Binding of angular which start with prefix class followed by a dot (.) and name of class, enclosed in a pair of square braces and with an Boolean expression. i.e. [class.bgColor]=“isBgColorRequired”.

<input type=“text” [value]='textValue' class='bgColor font shapeStyle' [class.bgColor]='isBgColorRequired'> 

* To have Multiple Class Binding we need to make use of generic syntax i.e. [class]=‘expression’ where the expression is a pair of string values. 

<input type=“text” [value]='textValue' [class]='classesToApply’>  where classesToApply = "bgColor font shapeStyle"; 

* A multiple class binding can be also bind with help of a method expression.

<input type=“text” [value]='textValue' [className]='getClasses()'>

 where

getClasses() {

    return 'bgColor font shapeStyle';

  };

* The NgClass directive can be used as an alternative to direct [class] bindings. However, using the above class binding syntax without NgClass is preferred because due to improvements in class binding in Angular, NgClass no longer provides significant value, and might eventually be removed in the future.

<input type=“text” value=“Welcome to SKMDotNet Angular” class=“bgColor”>

app.component.html

<div style="text-align: center;">

  <h1>welcome to {{myData}} application</h1>

  <br /><br /><br />

  <h5>Appearance from simple class/style we do have</h5>

  <input type="text" value="Welcome to SKMDotNet Angular" class="bgColor" />

  <br /><br />

  <h5>Appearance from single class binding</h5>

  <input type=“text” [value]='textValue' class='bgColor font shapeStyle' [class.bgColor]='isBgColorRequired'>

  <br /><br />

  <h5>Appearance from multiple class binding out of an expression</h5>

  <input type=“text” [value]='textValue' [class]='classesToApply'>

  <br /><br />

  <h5>Appearance from multiple class binding using a method expression</h5>

  <input type=“text” [value]='textValue' [className]='getClasses()'>

  <br /><br />

  <h5>Appearance from multiple class binding using ngClass</h5>

  <input type=“text” [value]='textValue' [ngClass]='getClasses()'>

</div>

app.component.ts

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

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  myData = "angular";

  textValue = "Welcome to SKMDotNet Angular";

  isBgColorRequired = true;

  classesToApply = 'bgColor font shapeStyle';

  getClasses() {

    return 'bgColor font shapeStyle';

  };

};

app.component.css

.bgColor{

    background-color: magenta;

}

.font{

    font-family: Arial, Helvetica, sans-serif;

    font-size: medium;

}

.shapeStyle{

height: 50px;

width: 500px;

}