Improved CSS class and style binding in Angular 9

The Ivy compiler and runtime implements improvements for handling styles. Previously, if an application received competing explanations for a style, those styles would destructively follow various other. With Ivy, the styles are united in a likely way.

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
	host: {
	style: "color:blue"
	},...
	})
	...
	@Directive({
	host: {
	style: "color:black",
	"[style.color]": "property"
	},...
	})

Previously, whichever binding was estimated end would get, and this could depend on the timing of moves to these conclusions. If myColor and myOtherColor both did undefined, the static ‘red’ style would be overlooked.

With version 9, you can control your styles into a clear, logical sequence of priority that isn’t subject to timing. The various special styles constantly have the highest precedence. For example, a binding to [style.color] cancels a different binding to [style].

However, for backward agreement ends, we have left [ngStyle] and [ngClass] covers the way the same as before. When their required values are updated, the current values will reverse any competing bindings.

You can see more about styling priority customs in the Template Syntax guide in the documentation.

As a facet impact of the styling refactoring, you can now also connect to CSS custom properties (also known as CSS variables).