iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
For simple class toggles, replace NgClass with Angular’s built-in [class.name] binding; for several classes, use [class] with a string, array, or object. Angular’s style guide recommends built-in class bindings for simpler syntax and notes that NgClass has an additional performance cost. Keep NgClass when you rely on behavior class bindings do not support, such as a Set input or an object key containing multiple space-separated class names.
Choose the right class binding
Angular offers two built-in options: bind one class with [class.name], or bind a collection of classes with [class]. Both can replace many common NgClass uses without the directive.
Toggle one class
Use an individual class binding when one condition controls one class:
<div [class.active]="isActive">...</div>When isActive is truthy, Angular applies active; otherwise, it removes that class.
#1 Best Overall
Bind several classes
For several classes controlled by independent conditions, bind an object to [class]. Each key is a class name, and its value determines whether the class is applied:
<div [class]="{ admin: isAdmin, dense: isDense }">...</div>The [class] binding also accepts a space-separated string or an array of class strings. Angular documents that static classes, a class binding, and individual class bindings can coexist on an element; the resulting class order is not guaranteed. See Angular’s binding guide.
When to keep NgClass
NgClass accepts a string, string array, Set<string>, object, null, or undefined. The documented forms for [class] are strings, arrays, and objects, so a Set cannot simply be passed through unchanged. NgClass also supports an object key that names multiple space-separated classes; class bindings do not support that form. Check the NgClass API and the class-binding documentation when deciding whether a particular expression is interchangeable.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchAngular’s style guide recommends built-in class bindings for simpler syntax and says NgClass and NgStyle incur an additional performance cost compared with built-in bindings. It does not quantify that cost, so there is no documented speedup figure to apply to an individual application. See the Angular style guide.
Rank #3
Update bound objects and arrays by replacing them
For an object or array bound to [class], Angular detects changes by comparing the previous and current values by reference. If you mutate the existing object or array but retain the same reference, the documented binding behavior does not detect that update. Assign a new object or array when its contents change.
// Replace the object rather than mutating it in place
this.classes = { ...this.classes, active: true };This reference-change caveat applies to object and array inputs; it is not a reason to depend on a particular class order in rendered output.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Run Angular’s NgClass migration
Angular provides a schematic that converts usages it considers safe. From the project directory, run:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
ng generate @angular/core:ngclass-to-class- Run the command in the Angular project you want to migrate.
- Review the resulting diff: the schematic does not claim to convert every
NgClassuse. - Run the project’s usual checks and verify the affected UI states, especially where class behavior depends on a collection or object shape.
By default, the schematic avoids object literals whose keys contain multiple space-separated class names, such as 'class1 class2'. If you want it to split those into individual bindings, use the documented option:
ng generate @angular/core:ngclass-to-class --migrate-space-separated-keyFor example, that option can generate [class.class1]="condition" and [class.class2]="condition". Consult Angular’s NgClass-to-class migration guide for the schematic’s scope and examples; Angular also lists it in its migrations overview.
Quick Recap
Practical migration checklist
- Use
[class.name]for a single class controlled by one condition. - Use
[class]with a string, array, or object for a collection of classes. - Keep or deliberately adapt cases that rely on
Setinputs or multi-class object keys; they are not direct equivalents of the listed class-binding forms. - Replace object or array references when their contents change.
- Do not write tests that rely on the order of classes in the rendered class string.
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.
