Philip

Philip's blog

0%

angular-ng-class

Posted on Edited on In
Symbols count in article: 527 Reading time ≈ 2 mins.

Introduction

ngClass is a directive in Angular that allows you to add or remove classes on an HTML element.

Usage

First, create a Student component in your app.

1
ng generate component student

1. import NgClass from @angular/common;

1
import {NgClass} from "@angular/common";

2. Add NgClass to the imports array in the component/module;

We’re using standalone component here.

1
2
3
4
5
6
7
@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  standalone: true,
  imports: [NgClass], // <--- here
  styleUrls: ['./student.component.css']
})

3. Use the ngClass directive in the HTML template.

We’ll categorize students based on their grades, different grades will have different colors.

ngClass accepts string, array, object, map, set, function, and binding to a CSS class. we’ll use all of them in the following examples.

1. String syntax

Note, since ngClass is a property binding, we need to wrap the class name in '' to make it a hard-coded string, otherwise the class name will be treated as a variable in your component.

1
<div [ngClass]="'grade-A'">Student A</div>

ngClass is commonly used to bind a variable in component, for example, we can define a variable grade in the component, and bind it to the ngClass directive.

1
grade = 'grade-A';
1
<div [ngClass]="grade">Student A</div>

If you want to apply a class without a condition, you can simply use the following syntax.

1
<div class="grade-A">Student A</div>

2. Array syntax

1
<div [ngClass]="['grade-A', 'grade-B']">Student B</div>

3. Object syntax

1
<div [ngClass]="{'grade-A': true, 'grade-B': false}">Student C</div>

4. Map syntax

1
<div [ngClass]="gradeMap">Student D</div>
1
2
3
4
gradeMap = new Map<string, boolean>([
  ['grade-A', true],
  ['grade-B', false]
]);

5. Set syntax

1
<div [ngClass]="gradeSet">Student E</div>
1
gradeSet = new Set<string>(['grade-A', 'grade-B']);

With any object-like bindings such as Array, Object, Map, and Set syntax, the identity of the object must change for Angular to apply the new class. Updating the property without changing the identify has no effect, for example:

This one doesn’t work, because gradeObject is the same object.

1
this.gradeObject["grade-b"] = false;

This one works, because gradeObject is a new object.

1
this.gradeObject = {...this.gradeObject, "grade-b": false};

Note that, Map and Set syntax are rarely used, object and array syntax are the most common.

6. Expression syntax

grade is a component variable, we can use it in the expression.

1
<div [ngClass]="grade === 'isGradeA' ? 'grade-A' : ''">Student F</div>

7. Function syntax

1
<div [ngClass]="getGrade()">Student F</div>
1
2
3
getGrade() {
  return 'grade-A';
}

Difference between [ngClass] and [class]

[ngClass] is a directive that allows you to add or remove classes based on conditions, while [class] is a property binding that allows you to add a class without a condition.

Most of the above case can be achieved by [class] as well, except the following case.

This one works

1
<div [ngClass]="{'grade-a grade-b': true}">Student</div>

But this one doesn't work

1
<div [class]="{'grade-a grade-b': true}">Student</div>

References