Class Data Binding In Angular

Introduction

 

This article will explain the class data binding in an Angular application. I am going to discuss the Angular class binding with examples.

 

In previous articles, I discussed interpolation binding and property binding in Angular applications.

• Interpolation Data Binding in Angular
• Property Data Binding in Angular

Let us learn Class Data Binding in Angular with a demo application.

 

Step 1

 

Open the command prompt from Windows Search. Alternatively, you can press the Windows key +R from the keyboard, type cmd, and hit Enter.

 

Step 2

 

Create a new project in Angular.

 

ng new AngularDemo

 

 

Step 3

 

Open the project in Visual Studio Code by typing the following command to open the project.

 

Code .

 

 

Step 4

 

Open terminal in Visual Studio Code and create a component "employee".

 

ng g c employee

 

 

Step 5

 

Open the employee component in your application and add the following code.

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

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

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;
  ProfileImage:string="assets/Images/farhan.png";
  CsharpProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";
  buttonStyle:string="myButton";
}

Step 6

 

Open employee.component.html in your application and add the following code.

<table class="table table-bordered">
  <thead class="bg-dark text-white text-center text-uppercase">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Profile Image</th>
      <th>Csharpcorner Profile</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{firstName}}</td>
      <td>{{lastName}}</td>
      <td>{{age}}</td>
      <td>{{position}}</td>
      <td>{{office}}</td>
      <td>{{salary}}</td>
      <img [src]="ProfileImage " height="80" width="80">
      <td>
        <a [href]="CsharpProfile" target="_black" [class]='buttonStyle'>My Profile</a>
      </td>
    </tr>
  </tbody>
</table>

Step 7

 

Open the employee.component.css in the project and write the following code for CSS style.

.myButton{
    background: var(--red);
    padding: 7px;
    border-radius: 3px;
    box-shadow: 2px 3px #000000a8;
    color: white;
    text-decoration: none;
}
.myButton:hover{
    background: var(--green);
 }

Step 8

 

Open app.component.html in your application and take the selector name from employee.component.ts.

<app-employee></app-employee>

Step 9

 

Run the application by typing the following command.

 

ng serve --open

 

 

Adding or removing a single class

 

To add or remove a single class, we need to include the prefix class within a pair of square brackets followed by a DOT and then the name of the class that we want to add or remove.

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

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

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;
  ProfileImage:string="assets/Images/farhan.png";
  CsharpProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";
  buttonStyle:string="myButton";
}

<a [href]="CsharpProfile" target="_black" class="btn btn-primary" [class.buttonStyle]='buttonStyle'>My Profile</a>

How to add or remove multiple style classes

 

If you want to add or remove multiple classes, then you need to use the ngClass directive. The AddMultipleClass() method returns an object with 2 key/value pairs. The key is a CSS class name. The value can be true or false. True to add the class and False to remove the class. The keys (myButton & btnprimary) are set to true, both classes will be added to the anchor element.

.myButton{
    background: var(--red);
    padding: 7px;
    border-radius: 3px;
    box-shadow: 2px 3px #000000a8;
    color: white;
    text-decoration: none;
    font-weight: 400;
}
.myButton:hover{
    background: var(--green);
 }

 .btnprimary{
    background: var(--blue);
    color: white;
    padding: 8px;
    border-radius: 3px;
    font-weight: 500;
    box-shadow: 2px 3px black;
    text-decoration: none;
 }

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

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

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;
  ProfileImage:string="assets/Images/farhan.png";
  CsharpProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";
  buttonStyle:boolean=true;
  ApplyBootstrapButtonStyle:boolean=true;

  AddMultipleClass()
  {
    let MyStyle={
      myButton:this.buttonStyle,
      btnprimary:this.ApplyBootstrapButtonStyle
    };
    return MyStyle;
  }
}
<a [href]="CsharpProfile" target="_black" [ngClass]='AddMultipleClass()'>My Profile</a>

buttonStyle:boolean=true;
ApplyBootstrapButtonStyle:boolean=false;

buttonStyle:boolean=false;
ApplyBootstrapButtonStyle:boolean=true;

SUMMARY

 

In this article, I explained class data binding and the use of ngClass directive. I hope you have understood the concept of class binding. This article should be very helpful for beginners.