ngStyle in Angular

Dhanush - Apr 26 '22 - - Dev Community

Angular NgStyle is a built-in directive that lets you set a given DOM element’s style properties. The key is a style name, and the value is an expression to be evaluated. The resulting non-null value, expressed in the given unit, is assigned to the given style property.

Image description

In app.component.html:

<input type="text" [ngStyle]="{'color':'red', 'font-weight':'800'}" [(ngModel)]="value">

<label [ngStyle]="{'color':'blue', 'font-weight':'800'}">{{value}}</label>

<input type="text" [ngStyle]="{'color':'green', 'font-weight':'800'}" value="{{value}}">
Enter fullscreen mode Exit fullscreen mode

We can also use conditional statements inside of ngStyle to display colors based on the given conditions.

Thank You !!! 😉

Reference: https://www.c-sharpcorner.com/article/ngstyle-in-angular/

. . . . . . . . . . . . . . . . . . . . . . . . . . .