Angular

How To Handle ngClass And ngStyle In Angular

Introduction

 
In this article, we will learn How to Handle ngClass and ngStyle in Angular.
 
Step 1
 
Create an Angular project setup using the below commands or however you create your Angular app
 
ng new sample
 
Step 2 - NgClass & NgStyle
  • NgClass & NgStyle are Angular Directives.
  • It allow us to conditionally apply one-to-many classes/styles to an element.
  • This provides a way to work with multiple classes or styles at once and apply them conditionally; compared to their alternatives:
  • Angular’s class and style bindings only allow a single class or style to be conditionally applied at a time.
  • Native style and class attributes apply one-to-many classes/styles statically
NgClass Types
 
It can receive input are inline declarations, or a property/method from our TypeScript class. 
 
NgClass support for,
  • Arrays,
  • strings of classes,
  • configuration objects
Syntax
  • [ngClass]="['is- flag', 'is- list '"]
  • [ngClass]="is-flag is- list"
  • [ngClass]="{'is-flag': true, 'is-list': true}
NgStyle Syntax
 
[ngStyle]="{font-size.px: 14}"
 
Step 3 - Install NgBootstrap
 
// Installation for Angular CLI
ng add @ng-bootstrap/ng-bootstrap
 
App.module.ts
 
Now we will declare form in app.module.ts,
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. import { NgbModule } from '@ng-bootstrap/ng-bootstrap'  
  6.   
  7. @NgModule({  
  8.   imports:      [ BrowserModule, FormsModule, NgbModule.forRoot()],  
  9.   declarations: [ AppComponent],  
  10.   bootstrap:    [ AppComponent ]  
  11. })  
  12. export class AppModule { }  
Step 4
 
Now, we will write integration on App.component.html
  1. <h4>NgStyle</h4>  
  2. <ul *ngFor="let person of people">  
  3.   <li [ngStyle]="{'color':getColor(person.country)}"> {{ person.name }} ({{ person.country }})  
  4.   </li>  
  5. </ul>  
  6. <hr>  
  7. <h4>Alternative Syntax: </h4>  
  8. <ul *ngFor="let person of people">  
  9.   <li [style.color]="getColor(person.country)">{{ person.name }} ({{ person.country }})  
  10.   </li>  
  11. </ul>  
  12. <hr>  
  13. <h4>Points and pixels</h4>  
  14. <ul *ngFor="let person of people">  
  15.   <li [ngStyle]="{'font-size.px':14}" [style.color]="getColor(person.country)">{{ person.name }} ({{ person.country }})  
  16.   </li>  
  17. </ul>  
  18. <hr>  
  19. <h4>Alternative of Points and pixels</h4>  
  20. <ul *ngFor="let person of people">  
  21.   <li [style.font-size.px]="14" [style.color]="getColor(person.country)">{{ person.name }} ({{ person.country }})  
  22.   </li>  
  23. </ul>  
  24. <hr>  
  25. <h4>NgClass</h4>  
  26. <ul *ngFor="let person of people">  
  27.   <li [ngClass]="{  
  28.     'text-success':person.country === 'UK',  
  29.     'text-primary':person.country === 'USA',  
  30.     'text-danger':person.country === 'HK'  
  31.   }">{{ person.name }} ({{ person.country }})  
  32.   </li>  
  33. </ul>  
  34. <hr>  
  35. <h4>Alternative of NgClass</h4>  
  36. <ul *ngFor="let person of people">  
  37.   <li [class.text-success]="person.country === 'UK'" [class.text-primary]="person.country === 'USA'" [class.text-danger]="person.country === 'HK'">{{ person.name }} ({{ person.country }})  
  38.   </li>  
  39. </ul>  
Step 5
 
Next, we can open the app.component.ts and write some code.
  1. import { Component } from '@angular/core';  
  2. @Component({  
  3.   selector: 'my-app',  
  4.   templateUrl: './app.component.html',  
  5.   styleUrls: ['./app.component.css']  
  6. })  
  7. export class AppComponent {  
  8.   getColor(country) {  
  9.     switch (country) {  
  10.       case 'UK':  
  11.         return 'green';  
  12.       case 'USA':  
  13.         return 'blue';  
  14.       case 'HK':  
  15.         return 'red';  
  16.     }  
  17.   }  
  18.   people: any[] = [  
  19.     {  
  20.       "name": "Douglas  Pace",  
  21.       "country": 'UK'  
  22.     },  
  23.     {  
  24.       "name": "Mcleod  Mueller",  
  25.       "country": 'USA'  
  26.     },  
  27.     {  
  28.       "name": "Day  Meyers",  
  29.       "country": 'HK'  
  30.     },  
  31.     {  
  32.       "name": "Aguirre  Ellis",  
  33.       "country": 'UK'  
  34.     },  
  35.     {  
  36.       "name": "Cook  Tyson",  
  37.       "country": 'USA'  
  38.     }  
  39.   ];  
  40. }  
Step 6
 
Now we will run the application
 
ng serve
 
On successful execution of the above command, it will show the browser,
 
How to Handle ngClass and ngStyle in Angular

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found