Angular Conditional Class with *ngClass : Angular 14

Angular Conditional Class allows us to style elements based on some condition, Conditional CSS (Cascading Style Sheets) styles are useful for changing the color or font size of specific elements, and much more. For example, we can use it to style a div element in a specific color. This is a very powerful way to change the style and add extra features without having to add extra HTML.

In Angular 14, the conditional class is a good way to add or remove a class based on a condition. In this tutorial, we will learn how to Unlock the potential of Angular conditional class to easily manipulate CSS classes based on logic and user interactions.

Table of Contents

1 How to Use ngclass with method in Angular Conditional Class
2 Further Reading

How to Use ngclass with method in Angular Conditional Class

Angular Conditional classes are a way to add dynamic CSS class to an element based on a condition. The Conditional styles are similar to inline styles (Cascading Style Sheets), except they are defined within the CSS document instead of on a separate block of code.

Angular provides several ways to add classes conditionally. The conditional class implementation is divided into two distinct categories:

Single conditions
Multiple conditions.

How to Use Angular ngClass with a condition

Syntax is: [ngClass]=”{‘class name here’: condition here}”

<div class="container">
  <div *ngFor="let ticket of tickets">
    <div [ngClass]="{'danger': ticket.resulution === 'Pending'}">
      {{ticket.resulution}}
    </div>
  </div>
</div>

Here’s an example of how to use a Angular Conditional Class with class attribute and ngClass. we want to add a class when the condition value is ‘Pending’, the “danger” class is applied; if the condition is false, the class is not applied.

in following the example, we will implement the same logic as we implemented in the previous example but here, we will use condition class by using Angular Class attribute.

Syntax is :[class.className1]=”some condition”.

<div class="container">
  <div *ngFor="let ticket of tickets">
    <div [class.pending]="ticket.resulution === 'Pending'">
      {{ticket.resulution}}
    </div>
  </div>
</div>

How to use Angular multiple ngclass conditions

To add multiple conditions, We can pass conditional expression as an object key as shown below.

Let’s consider an example of style binding. In this example, we want to add an “error ” class in a div element when a ticket is in the pending stage, and add the “success” class when it is in progress, we could do this:

Syntax is: [ngClass]=”{‘className1’: condition1, ‘className2’ : condition2 }”

<div class="container">
  <div *ngFor="let ticket of tickets">
    <div [ngClass]="{'error': ticket.resulution=='Pending', 
                    'success' : ticket.resulution=='Resolved' }">
      {{ticket.resulution}}
    </div>
  </div>
</div>

Syntax : [ngClass]=“condition1 ? ‘className1’ : ‘className2’ “

Example :

<div class="container">
  <div *ngFor="let ticket of tickets">
    <div [ngClass]="ticket.resulution=='Pending' ? 'error':'success'">
      {{ticket.resulution}}
    </div>
  </div>
</div>

ngClass with a method expression

With CSS, you can change the font color and background color of the div element with just a few lines of code. for example here a method and a object variable providing class information

getClass(resulution: string) {
    return {
      'warn': resulution == "In-progress",
      'sucess': resulution == "Resolved",
      'error': resulution == "Pending"
    }
  }

Syntax : [ngClass]=“methodName(value) “

Example : In the HTML Template then we can use a method.

<div class="container">
  <div *ngFor="let ticket of tickets">
    <div [ngClass]="getClass(ticket.resulution)"> {{ticket.resulution}}</div>
  </div>
</div>

Angular Conditional Class with *ngClass complete code (app.component.ts)

import { Component } from '@angular/core';
import { ITicket } from './ITicketModel';

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

  tickets: ITicket[] = [];
  constructor() {

  }

  ngOnInit(): void {
    this.tickets = [
      { id: '1001', resulution: 'In-progress', issue: 'Internet is not working' },
      { id: '1002', resulution: 'Resolved', issue: 'VPN is not working' },
      { id: '1003', resulution: 'Pending', issue: 'Mouse is not working' },
    ]
  }

  getClass(resulution: string) {
    return {
      'warn': resulution == "In-progress",
      'sucess': resulution == "Resolved",
      'error': resulution == "Pending"
    }
  }
}

export interface ITicket
{
    id:string;
    resulution:string;
    issue:string;
}

How to Use ngclass with method in Angular Conditional Class

How to Use Angular ngClass with a condition

How to use Angular multiple ngclass conditions

ngClass with a method expression

Further Reading