Angular 8 NgStyle Directive

The ngStyle attribute is used to change and style the multiple properties of Angular. We can change the value, color, and size, etc. of the component. It is a built-in directive, ngStyle, to modify a component or element’s style attribute.

It acts the same as the component attribute bindings. The ngStyle directive specifies the style attribute for the HTML element. The value of the ngStyle quality must be an object, or an expression returning an object.

The object consists of CSS properties and values in key-value pairs.

Syntax:

Example:

Using an object with CSS keys and values;

How to apply CSS classes dynamically with ng-Class

In the previous article, we have to seen that how to use ngClass directive to apply a CSS class to the element. It facilitates us to add or remove a CSS dynamically.

Create a class in the component.ts file, which will change the color of the text yellow if the server is online.

component.ts file:

Component.html file:

Output:

Pin It on Pinterest

Share This