Angular Conditional Class with *ngClass

This tutorial will guide you through the basics of implementing conditional classes with *ngClass in Angular, showcasing different syntaxes and examples.

Angular provides various ways to conditionally add classes to HTML elements, allowing for dynamic styling based on different conditions. One such approach is using the *ngClass directive.

Prerequisites

Make sure you have Angular installed on your system. You can install it using the following command:

npm install -g @angular/cli

Conditional Class Syntax

Angular supports multiple syntaxes for adding conditional classes using *ngClass. The key syntaxes include:

1. Type One: [class.my_class] = "step === 'step1'"
2. Type Two: [ngClass]="{'my_class': step === 'step1'}"
3. Multiple Conditions: [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"
4. Type Three: [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"
5. Type Four: [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

*ngClass vs. [ngClass]

Before we delve into the examples, it’s important to note that *ngClass is different from [ngClass]. The former is a shorthand syntax for structural directives, while the latter is used explicitly for class binding.

<!-- Example of *ngClass -->
<div *ngFor="let item of items">{{item}}</div>

<!-- Examples of [ngClass] -->
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Basic Usage

Let’s start with a basic example demonstrating the usage of *ngClass.

<!-- Example: Basic Usage -->
<ol class="breadcrumb">
  <li [ngClass]="{'active': step === 'step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step === 'step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step === 'step3'}" (click)="step='step3'">Step3</li>
</ol>

In this example, the class active will be applied conditionally based on the value of the step variable.

Advanced Usage

Now, let’s explore more advanced use cases, including boolean properties, string expressions, array expressions, and method expressions.

Boolean Properties

<div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }"></div>

String Expressions

<div [ngClass]="isActive ? 'active' : 'inactive'"></div>

Array Expressions

<div [ngClass]="['active', isHighlighted ? 'highlight' : '']"></div>

Object Expressions

<div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }"></div>

Method Expression

<div [ngClass]="getSomeClass()"></div>

In your component:

getSomeClass() {
  const isValid = this.property1 && this.property2;
  return { someClass1: isValid, someClass2: isValid };
}