For simple conditional classes, replace NgClass with Angular’s built-in class bindings: use [class.active]="isActive" for one class, or [class]="{ active: isActive, dense: isDense }" for several. Angular recommends built-in bindings for simpler syntax and notes that NgClass has an additional performance cost. Keep NgClass when you depend on behavior the built-in bindings do not support, such as a Set input or a space-separated class list in one object key.
Choose the binding that fits the classes
Toggle one class
Use an individual class binding when a single class depends on a condition:
As an Amazon Associate I earn from qualifying purchases.
<div [class.active]="isActive">Content</div>Angular applies active when the expression is truthy and removes it when the expression is false.
Bind several classes
Use [class] with an object when each class has its own condition:
#1 Best Overall
<div [class]="{ admin: isAdmin, dense: isDense }">Content</div>You can also bind a space-separated string or an array of class strings. For example, an existing simple object binding can be changed directly:
<!-- Before -->
<div [ngClass]="{admin: isAdmin, dense: density === 'high'}"></div>
<!-- After -->
<div [class]="{admin: isAdmin, dense: density === 'high'}"></div>What changes when you replace NgClass?
Both approaches add and remove classes, but their accepted values and edge cases are not identical.
| Capability | NgClass |
Built-in class bindings |
|---|---|---|
| One conditional class | Can be expressed with a class map | [class.name]="condition" |
| Multiple classes | String, string array, Set<string>, or object |
[class] accepts a space-separated string, array, or object |
| Object key containing multiple class names | Supported | Not supported |
| Object or array update detection | Directive behavior applies | Angular documents reference comparison; replace the value rather than mutating it in place |
| Directive dependency | Uses the NgClass directive |
Uses template binding syntax |
Angular’s style guide recommends built-in class bindings for their simpler syntax and states that NgClass and NgStyle incur an additional performance cost. The documentation does not quantify a speedup, so treat this as a qualitative reason to prefer the built-in syntax—not as a promised benchmark result. See the Angular style guide.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteHandle object and array updates correctly
For [class] bound to an array or object, Angular checks whether the new value has a different reference from the previous value. If you change a property on the same object or edit the same array in place, the reference stays unchanged and the documented class-binding update is not triggered. Create and assign a replacement value when the classes change.
Rank #3
// Replace the object rather than mutating it in place
this.classes = { ...this.classes, active: true };Static classes, a direct class binding, and individual class bindings can coexist on an element. Angular combines them in the rendered output, but does not guarantee their order. Avoid tests or application logic that depend on a particular order in the class attribute. Details are in Angular’s template binding guide.
Know when NgClass is still the better fit
Keep NgClass if the existing expression uses a capability that does not carry over directly:
- A
Set<string>value:NgClassaccepts a set. Angular’s documented[class]forms are strings, arrays, and objects, so do not pass a set through unchanged. - Several class names in one object key:
NgClasssupports a key such as'class1 class2'. Built-in class bindings do not support space-separated class names in one object key.
You may still convert these cases deliberately—for example, by creating individual bindings—but the result should preserve the original conditions and behavior.
Run Angular’s migration schematic
Angular provides a schematic to convert usages it considers safe. From the project root, run:
ng generate @angular/core:ngclass-to-classBy default, the migration avoids object literals with keys containing multiple space-separated classes. To ask it to convert those cases into one individual binding per class, use the documented option:
ng generate @angular/core:ngclass-to-class --migrate-space-separated-keyFor a key like 'class1 class2', that option generates bindings equivalent to [class.class1]="condition" and [class.class2]="condition". The conversion is not universal: Angular documents that the schematic migrates only usages it considers safe.
- Run the command from the Angular workspace root.
- Review the generated diff, especially any skipped usages or converted multi-class keys.
- Run the project’s normal checks and verify the affected UI states in the application.
See Angular’s NgClass-to-class migration guide and migrations overview for the current schematic details.
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.
