Jun 15, 2019 Author - Sai gowtham

Angular ngStyle and ngClass directives tutorial

angular2min read

In this tutorial, we are going to learn about how to add and remove styles conditionally in angular.

ngStyle

ngStyle attribute directive helps us to add and remove inline styles dynamically.

Let’s see an example.

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  h1color = 'red';
   changeColor(){
      this.h1color = "green" ;
   }
}

app.component.html

<h1  [ngStyle]="{backgroundColor: h1color}">Hello angular</h1><button (click)="changeColor()">Change color</button>

In the above code, we have added a object {backgroundColor:h1color} to ngStyle directive where backgroundColor is style name and h1color is an expression to be evaluated.

If we click on a Change color we are changing the backgroundColor of the h1 element to green.

ngClass

ngClass attribute directive helps to add and remove CSS class names conditionally.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isActive = false;
  changeColor() {
    this.isActive = !this.isActive;
  }
}

app.component.css

.my-color{    background-color: aqua;
}

.red-color{
    background-color: red;
}

app.component.html

<h1 [ngClass]="[isActive ? 'my-color': 'red-color']">Hello angular</h1><button (click)="changeColor()">Change color</button>

In the above code we have added [isActive ? 'my-color': 'red-color'] to ngClass directive where isActive is an expression and my-color and red-color are css class names.

If isActive property is true we are adding my-color class to h1 element otherwise red-color class is added.