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 Types
It can receive input are inline declarations, or a property/method from our TypeScript class.
NgClass support for,
Syntax
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'
  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