This schematic migrates NgStyle directive usages to style bindings in your application. It will only migrate usages that are considered safe to migrate.
Run the schematic using the following command:
ng generate @angular/core:ngstyle-to-styleAn object with a single key becomes a binding to that one style property.
Before
<div [ngStyle]="{'background-color': 'red'}"></div>After
<div [style.background-color]="'red'"></div>An object with more than one key becomes a single [style] binding.
Before
<div [ngStyle]="{'color': 'blue', 'font-weight': 'bold'}"></div>After
<div [style]="{'color': 'blue', 'font-weight': 'bold'}"></div>Configuration options
The migration supports a few options for fine tuning the migration to your specific needs.
--best-effort-mode
By default, the migration avoids migrating object references usages of NgStyle
When the --best-effort-mode flag is enabled, ngStyle instances binded to object references are also migrated.
This can be unsafe to migrate, for example if the binded object is mutated.
<div [ngStyle]="styleObject"></div>to
<div [style]="styleObject"></div>