Angular Built-in Directives: ngStyle

In the previous article, we talked about ngSwitch. In this post, we will discuss *ngStyle. ngStyle dynamically updates an HTML element file based on a given expression. It is also used to automatically reset your <div> style based on the value of the controller in your component.

Let’s look at it in code. In your @Component decorator, let’s change the style of the *ngFor stocks list to color red.

Save and go back to your browser.


  • As you can see the stocks list is changed from black to red.

ngStyle has more ways to dynamically edit our list. Again, let’s create variables that can be used by our *ngStyle. Let’s make the list color blue and twice bigger than it was before.

Go back to the browser and it will look like this:


That’s it! We’re done for ngStyle. On the next article, we will discuss ngClass.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.