Attribute Directive Part 2-->Angular ngClass Directive Example

It is used to add or remove CSS classes dynamically (run-time) from a DOM Element.

1. ngClass with string
2. ngClass with array
3. The ngClass with object
4. ngClass with component method

Example

.ts changes

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

@Component({

  selector: 'app-attributestylebinding',

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

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

})

export class AttributestylebindingComponent {

  a:number=0;

  b:number=0;

  res:number=0;

  cssclassname:string="default";

 sum()

 {

   this.res=this.a+this.b;

   this.cssclassname="c1";

 }

 mult()

 {

   this.res=this.a*this.b;

   this.cssclassname="c2";

 }

}

.html Changes

<style>

    .default{

        visibility: hidden;

    }

    .c1{

        color: blue;

        visibility: visible;

    }

    .c2{

        color: maroon;

        visibility: visible;

    }

   </style>

<div style="font-size:x-large;margin:20px">

enter a:<input type="number" [(ngModel)]="a"> <br>

enter b:<input type="number" [(ngModel)]="b"> <br>

<input type="button" value="sum" (click)="sum()">

<input type="button" value="mult" (click)="mult()">

<br>

<h3 [ngClass]="cssclassname">result:{{res}}</h3>

</div>

Output

ng Class as a string

Example

.html Changes

.ts Changes

Output

Applying multiple css classes with ngClass Directive:

.html Changes

<h3 [ngClass]="'one four'">Class Binding</h3>

Output

note:
-----
*ngClass directive is deprecated with Angular4,the alternative is class directive
         
                   ...
  <h3 [class]="cssclassname">result:{{res}}</h3>

Example

.ts

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

@Component({

  selector: 'app-attributestylebinding',

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

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

})

export class AttributestylebindingComponent {

  a:number=0;

  b:number=0;

  res:number=0;

  cssclassname:string="default";

 sum()

 {

   this.res=this.a+this.b;

   this.cssclassname="c1";

 }

 mult()

 {

   this.res=this.a*this.b;

   this.cssclassname="c2";

 }

}

.html changes

<style>

.one{ color: red; }

.two{ font-size: 30px; }

.three{ font-weight: bold; }

.four{ font-style: italic; }

.five{ color: green; }

.default{ visibility: hidden; }

 .c1{

     color: blue;

     visibility: visible;

 }

 .c2{

     color: maroon;

     visibility: visible;

 }

</style>

<h3 [ngClass]="['three', 'four', 'five']">Class Binding</h3>  

<div style="font-size:x-large;margin:20px">

enter a:<input type="number" [(ngModel)]="a"> <br>

enter b:<input type="number" [(ngModel)]="b"> <br>

<input type="button" value="sum" (click)="sum()">

<input type="button" value="mult" (click)="mult()">

<br>

<h3 [class]="cssclassname">result:{{res}}</h3>

</div>

Output

Example 2:

Note:

class directive allows applying CSS class based on Boolean type, where as it is
 not supported by ngclass directive
 syntax:
    <tagname [class.cssclassname]="true|false">..</tagname>

          true-it will apply CSS class to html element
          false-it will remove CSS class from html element

.html 

<style>
    .c1{
        background-color: black;
        color:white;
        border:5px solid yellow;
        width:30%;
        padding: 10px;
        margin: 20px;
    }
</style>
<h2 [class.c1]="flag">Rajakonda Uday Kumar</h2>
<br>
<input type="checkbox" [(ngModel)]="flag">Apply CSS

.ts

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

@Component({
  selector: 'app-classbindingexample',
  templateUrl: './classbindingexample.component.html',
  styleUrls: ['./classbindingexample.component.css']
})
export class ClassbindingexampleComponent {
  flag:boolean=false;
}


Output

ngClass with Array:

This is very much similar to the previous example i.e. applying multiple css classes. The difference is only the way you applying the css classes. The syntax to use ngClass with Array is given below. Here, you need to use one square bracket and then you need to specify the classes in a single quotes separated by a comma.

.Html changes

<h3 [ngClass]="['three', 'four', 'five']">

    Angular ngClass with String

</h3>

Output

Same can be done with true/false as shown below

<h3 [ngClass]="{'one':true, 'two':false, 'three':true}">

    Angular ngClass with String

</h3>

Output

Second way ->

<h3 [class]="{'one':true, 'two':false, 'three':true}">

    Angular ngClass with String

</h3>

Output

ngClass with Method

In this Class will be applied on the method return value.

Example

export class ClassbindingexampleComponent {

  flag:boolean=false;  

  AddCSSClasses(flag:string) {

      let Cssclasses;

      if(flag == "type2")

      {

        Cssclasses = {

          'one' : true,

          'two' : true

        }

      }

      else

      {

        Cssclasses = {

          'four' : true,

          'five' : true

        }

      }

      return Cssclasses;

  }

}

.html Changes

<style>

    .c1{

        background-color: black;

        color:white;

        border:5px solid yellow;

        width:30%;

        padding: 10px;

        margin: 20px;

    }

    .one{ color: red; }

    .two{ font-size: 30px; }

    .three{ font-weight: bold; }

    .four{ font-style: italic; }

    .five{ color: green; }

</style>

<h2 [class.c1]="flag">Rajakonda Uday Kumar</h2>

<br>

<input type="checkbox" [(ngModel)]="flag">Apply CSS

<h3 [ngClass]="AddCSSClasses('type1')">

    Angular ngClass with String

</h3>

Output

Difference between

style binding-->single characteristic
          
                      textcolor,showhide  variables
                                                                 ==>complex with style binding
                        <h2 [style.color]="textcolor"                        |
                          [style.visibility]="showhide">res..</h2>   the solution is                                                                                                ngstyle


    ngstyle      -->multiple characteristics
                     
                      mystyle={"color":..,"visibility":..};    ==>simple

                      <h2 [style]="mystyle">..</h2>

    ngclass      --> styling based on css classes