To add or remove one class in an Angular template, use a focused binding such as [class.active]="isActive". For a dynamic set of classes, Angular’s [class] binding accepts a string, array, or object. NgClass remains useful when you need its additional handling, including applying changes to a mutated array or object.
Toggle one class with a focused binding
Use [class.className] when a component value controls one class. Angular adds the class when the expression is truthy and removes it when the expression is falsy.
<button [class.selected]="isSelected">Choose</button>For example, if isSelected is true, the rendered button has the selected class. If it becomes false, Angular removes that class. This form is often the clearest choice for a single class. Angular’s binding guide describes a class binding as a good way to add or remove one class.
Set several classes with [class]
For a whole dynamic class set, bind to [class]. Angular accepts a string, an array of class-name strings, or an object whose class-name keys are enabled according to each value’s truthiness.
#1 Best Overall
<p [class]="statusClasses">Status</p>For example, a component property can be an object such as { ready: true, disabled: false }. The resulting element receives ready, but not disabled. You can also provide an array such as ['ready', 'highlighted'], or a string containing class names.
Static classes, a [class] binding, and specific bindings such as [class.active] can contribute classes to the same rendered element. Angular does not guarantee the order of the class names in the rendered result, so do not rely on that order.
When to use NgClass
NgClass is not required for every dynamic class update: direct class bindings cover one class and dynamic class sets. The Angular v18 NgClass API documents string, string-array, Set, and object inputs. Angular’s current binding guide identifies cases where NgClass may be useful, including a space-separated group of class names in one key or an existing array or object that is mutated in place.
For ordinary state-driven updates, prefer replacing an array or object with a new value when its contents change. That works naturally with direct class bindings and makes the update visible through reference comparison.
Rank #3
Why in-place changes can fail
When an array or object is used for a class binding, Angular compares the previous and current values by reference using ===. Editing the contents of the same array or object leaves its reference unchanged, so the binding may not apply the change.
// Direct [class] binding: replace the object when changing its contents.
this.statusClasses = { ...this.statusClasses, ready: false, disabled: true };Creating a new object or array gives Angular a different reference to compare. If your use case specifically involves mutating an existing collection, NgClass is an alternative described in the current binding guide; consult the API for the Angular version used by your project.
Choose the binding that matches the job
| Need | Binding | Value |
|---|---|---|
| Toggle one class | [class.active] |
A truthy or falsy expression |
| Set a dynamic group of classes | [class] |
A string, array of strings, or truthiness-map object |
| Use NgClass-specific handling | [ngClass] |
A string, string array, Set, or object, as documented for Angular v18 |
In older Angular learning material, NgClass is often presented as the way to apply multiple classes. For current templates, start with direct class bindings when they express the state clearly; reach for NgClass when its additional behavior fits the case.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
