ngStyle in angular with example - Tutorial

For Consultation : +91 9887575540

Stay Connected :

With the NgStyle directive, you can set a given DOM element CSS properties from Angular expressions. The simplest way to use this directive is by doing [style.]=”value”. For example:

This snippet is using the NgStyle directive to set the background-color CSS property to the literal string ‘yellow’. Another way to set fixed values is by using the NgStyle attribute and using key-value pairs for each property you want to set, like this:

Note: Notice that in the ng-style specification we have single quotes around background-color but not around color. Why is that? Well, the argument to ng-style is a Javascript object and color is a valid key, without quotes. With background-color, however, the dash character isn’t allowed in an object key, unless it’s a string so we have to quote it. Generally, I’d leave out quoting as much as possible in object keys and only quote keys when we have to.

Example :

Step1: Create new component and add following code

Step2: Add following code into html

Step3: Add reference of newly generated component and run program.


ngStyle example output



Select your currency