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