DEV Community

Dhanush
Dhanush

Posted on • Edited on

6 4 1 1 2

ngStyle in Angular

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/

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more