`Class Binding`

Conditionally applies CSS classes to an element.

Since Angular 2+ Spec ↗

Syntax

[class.name]="cond" | [class]="exprOrMap" | [ngClass]="map"

Parameters

Name	Type	Required	Description
`cond`	`boolean`	No	Adds the class when truthy, removes it otherwise.

Returns

template binding — Updates the element class list reactively.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <div [class.active]="isActive"
         [class]="{ done: isDone, error: hasError }">
    </div>
  `,
})
export class XComponent {
  isActive = true;
  isDone = false;
  hasError = false;
}

Notes

`[class.name]` toggles a single class. `[class]` accepts a string, array, or object map and merges with the static class attribute. The legacy `ngClass` directive is equivalent but `[class]` is preferred in modern Angular.