Carlos Cifuentes
AngularJS → Angular reference

ng-class / ng-style in modern Angular

ng-class and ng-style become native class and style bindings. No directive import is needed.

Before · AngularJS
<div ng-class="{ active: vm.isActive, 'has-error': vm.error }"
     ng-style="{ width: vm.width + 'px' }"></div>
After · Angular
<div [class.active]="isActive()"
     [class.has-error]="error()"
     [style.width.px]="width()"></div>

What changes

  • [class.name] toggles one class from a boolean.
  • [style.prop.unit] sets one style and adds the unit for you.
  • [class] and [style] accept an object or string when many values change together.

Migration tip. NgClass and NgStyle still exist, but the native bindings are lighter and are the recommended default.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn