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.
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
 
Class Data Binding In Angular
 
Step 3
 
Open the project in Visual Studio Code by typing the following command to open the project.
 
Code .
 
Class Data Binding In Angular
 
Step 4
 
Open terminal in Visual Studio Code and create a component "employee".
 
ng g c employee
 
Class Data Binding In Angular
 
Step 5
 
Open the employee component in your application and add the following code.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-employee',  
  5.   templateUrl: './employee.component.html',  
  6.   styleUrls: ['./employee.component.css']  
  7. })  
  8. export class EmployeeComponent {  
  9.   
  10.   firstName:string="Farhan";  
  11.   lastName:string="Ahmed";  
  12.   age:number=32;  
  13.   position:string="Software Developer";  
  14.   office:string="Bangalore";  
  15.   salary:number=65000;  
  16.   ProfileImage:string="assets/Images/farhan.png";  
  17.   CsharpProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";  
  18.   buttonStyle:string="myButton";  
  19. }  
Step 6
 
Open employee.component.html in your application and add the following code.
  1. <table class="table table-bordered">  
  2.   <thead class="bg-dark text-white text-center text-uppercase">  
  3.     <tr>  
  4.       <th>First Name</th>  
  5.       <th>Last Name</th>  
  6.       <th>Age</th>  
  7.       <th>Position</th>  
  8.       <th>Office</th>  
  9.       <th>Salary</th>  
  10.       <th>Profile Image</th>  
  11.       <th>Csharpcorner Profile</th>  
  12.     </tr>  
  13.   </thead>  
  14.   <tbody>  
  15.     <tr>  
  16.       <td>{{firstName}}</td>  
  17.       <td>{{lastName}}</td>  
  18.       <td>{{age}}</td>  
  19.       <td>{{position}}</td>  
  20.       <td>{{office}}</td>  
  21.       <td>{{salary}}</td>  
  22.       <img [src]="ProfileImage " height="80" width="80">  
  23.       <td>  
  24.         <a [href]="CsharpProfile" target="_black" [class]='buttonStyle'>My Profile</a>  
  25.       </td>  
  26.     </tr>  
  27.   </tbody>  
  28. </table>  
Step 7
 
Open the employee.component.css in the project and write the following code for CSS style.
  1. .myButton{  
  2.     background: var(--red);  
  3.     padding: 7px;  
  4.     border-radius: 3px;  
  5.     box-shadow: 2px 3px #000000a8;  
  6.     color: white;  
  7.     text-decoration: none;  
  8. }  
  9. .myButton:hover{  
  10.     background: var(--green);  
  11.  }  
Step 8
 
Open app.component.html in your application and take the selector name from employee.component.ts.
  1. <app-employee></app-employee>  
Step 9
 
Run the application by typing the following command.
 
ng serve --open
 
Class Data Binding In Angular
 

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.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-employee',  
  5.   templateUrl: './employee.component.html',  
  6.   styleUrls: ['./employee.component.css']  
  7. })  
  8. export class EmployeeComponent {  
  9.   
  10.   firstName:string="Farhan";  
  11.   lastName:string="Ahmed";  
  12.   age:number=32;  
  13.   position:string="Software Developer";  
  14.   office:string="Bangalore";  
  15.   salary:number=65000;  
  16.   ProfileImage:string="assets/Images/farhan.png";  
  17.   CsharpProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";  
  18.   buttonStyle:string="myButton";  
  19. }  
  20.   
  21. <a [href]="CsharpProfile" target="_black" class="btn btn-primary" [class.buttonStyle]='buttonStyle'>My Profile</a>  
Class Data Binding In Angular

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.
  1. .myButton{  
  2.     background: var(--red);  
  3.     padding: 7px;  
  4.     border-radius: 3px;  
  5.     box-shadow: 2px 3px #000000a8;  
  6.     color: white;  
  7.     text-decoration: none;  
  8.     font-weight: 400;  
  9. }  
  10. .myButton:hover{  
  11.     background: var(--green);  
  12.  }  
  13.   
  14.  .btnprimary{  
  15.     background: var(--blue);  
  16.     color: white;  
  17.     padding: 8px;  
  18.     border-radius: 3px;  
  19.     font-weight: 500;  
  20.     box-shadow: 2px 3px black;  
  21.     text-decoration: none;  
  22.  }  
  23.   
  24. import { Component, OnInit } from '@angular/core';  
  25.   
  26. @Component({  
  27.   selector: 'app-employee',  
  28.   templateUrl: './employee.component.html',  
  29.   styleUrls: ['./employee.component.css']  
  30. })  
  31. export class EmployeeComponent {  
  32.   
  33.   firstName:string="Farhan";  
  34.   lastName:string="Ahmed";  
  35.   age:number=32;  
  36.   position:string="Software Developer";  
  37.   office:string="Bangalore";  
  38.   salary:number=65000;  
  39.   ProfileImage:string="assets/Images/farhan.png";  
  40.   CsharpProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";  
  41.   buttonStyle:boolean=true;  
  42.   ApplyBootstrapButtonStyle:boolean=true;  
  43.   
  44.   AddMultipleClass()  
  45.   {  
  46.     let MyStyle={  
  47.       myButton:this.buttonStyle,  
  48.       btnprimary:this.ApplyBootstrapButtonStyle  
  49.     };  
  50.     return MyStyle;  
  51.   }  
  52. }  
  53. <a [href]="CsharpProfile" target="_black" [ngClass]='AddMultipleClass()'>My Profile</a>   
  1. buttonStyle:boolean=true;    
  2. ApplyBootstrapButtonStyle:boolean=false;     
Class Data Binding In Angular
  1. buttonStyle:boolean=false;    
  2. ApplyBootstrapButtonStyle:boolean=true;    
Class Data Binding In Angular

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.


Similar Articles