Class binding in angular 12

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have explained the class binding in very simple way so that you can understand easily.

For class binding in angular example i have created three classes, in the following example i am going to use them.

 

src/app/app.component.css

.text-info{
  color: rgb(28, 120, 195);
}
.text-danger{
  color: rgb(231, 56, 56);
}
.text-bold{
  font-weight: bold;
}

In simple HTML element we use class attribute to add a class

src/app/app.component.html

<p class="text-info">Code Learning Point</p>

Output : Code Learning Point

Basic Syntax of class binding in angular

<p [class]="text-info">Code Learning Point</p>

Output : Code Learning Point

We can bind a single class based on some condition

 

src/app/app.component.html

<p [class.text-info]="isInfo">Code Learning Point</p>

Here isInfo is a property of the component class and the type is boolean

 

src/app/app.component.ts

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

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

  public isInfo: boolean = true;

  ngOnInit() {}

}

Output : Code Learning Point

 

Since the value of isInfo property is true then text-info class will get applied to this element.

Using [class.className]='boolean' we can add only single class based on some condition but based on some condition how can we add multiple class to an HTML element.To add multiple class we will use ngClass directive , directive is nothing but a custom HTML attribute provided by angular.

 

src/app/app.component.html

<p [ngClass]="message">Code Tutorial Point</p>

src/app/app.component.ts

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

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

  public success: boolean = true;
  public failed: boolean = false;

  public message = {
    "text-info": this.success,
    "text-danger": this.failed
  }
  ngOnInit() { }
}

We can directly assign the object directly to the [ngClass]

<p [ngClass]="{'text-info':success,'text-danger':failed}">Code Tutorial Point</p>

 

src/app/app.component.ts

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

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

  public success: boolean = false;
  public failed: boolean = true;
  ngOnInit() { }
}

Abov example we have assigned message object to the ngClass directive , in the message object we have two properties where key is the class name and the value is the boolean message status . 

 

if the success is true and failed is false then the text-info class will get applied to the HTML element

Output : Code Learning Point

 

if the success is false and failed is true then the text-danger class will get applied to the HTML element

Output : Code Learning Point

 

 

I hope this article is helpful for you , i am very glad to help you thanks for reading

 

 

Related Posts

Card image cap

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this angular material datepicker post i will show you how to use Datepicker in angular app using angular material. ...

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attrib ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In angular we use pipes to formate the data, thre are few built in pipes in angular. ...

Card image cap

Custom Pipe In Angular

Angular12 17-07-2021 Saheb Sutradhar

In this post you will learn how to create custom pipe in angular. When you need some data formatting which can not be done by using angular built-in pipes then ...