NgStyle and NgClass in Angular

The NgStyle directive is used to manage styles applied directly to elements. Ngstyle attribute directive is a great way to set inline styles dynamically in angular projects. Attribute directives are designed to change the appearance or behavior of the dom elements. They are attached to they do not create or remove Dom elements as the structural directives do.

We typically control how elements appear by adding and removing CSS classes dynamically. There are two ways in which you can achieve this a class binding is a good way to add or remove a single class the in NgStyle directive add or remove many styles at the same time let’s talk both one by one. Ngstyle and NgClass is the part of Built-in Directives of Angular.

NgClass

A good way to apply ngclass is by binding it to a key-value control object each key of the object is a CSS class name. Its value is true if the class should be added and false if it should be removed. Let’s understand it with an example

Our goal here is to create a boolean property called ease available on the app component and then based on its value we want to display my product I threw in green orange-red so let’s see how we can achieve this by using ngclass

import {Component} from '@angular/core';


@Component({
  selector: 'my-app',
  styles:[`
  .available{
   color:green;
  }
  .unavailable{
   color:red;
  }
  `],
  template:
  <h2 [ngClass]="{available:isAvailable, unavailable:!isAvailable}">My Product</h2>
})

export class AppComponent{
  isAvailable=true;
}

So in line with what we wanted to do we created a boolean property called isavailable on the component class. Then we created two styles one available .available and then another one unavailable .unavailable. Then we attached the NgClass attribute to a key-value control object. Then is available is true then it’s going to apply the available class available:isAvailable and when is available is false it’s going to apply unavailable class unavailable:!isAvailable.

So now let’s go ahead and save this file and see how it works back in the browser we can now see that my product is green now.

when we go back and change the value of is available to false in a AapComponent

export class AppComponent{
  isAvailable=false;
}

And safety file again we should see that unavailable class is now applied to our h1 tag and the text is going to be in red color. So the unavailable class is now being applied.

NgStyle

Using the NgStyle attribute directive we can set inline styles dynamically binding the NgStyle attribute directive. Lets we set many inline styles simultaneously in the following example. We are going to style multiple properties of our element. We are going to bind these properties to values that can be updated either by the user or via our components.

import {Component} from '@angular/core';


@Component({
  selector: 'my-app',
  template:`
  <div [ngStyle]="{'color': color, 'font-size': size + 'px', 'font-weight': 'bold'}">
     Style using NgStyle
  </div>
  <input [(ngModel)]="color"/>
  <button (click)="size = size + 1"> + </button>
  <button (click)="size = size - 1"> - </button>
  `
  
})

export class AppComponent{
  size=10;
}

So let’s see what we have here we first created it style property on a rap component and then assigned it a value of 10. Then we have a div which has some text called style using NgStyle. And then we have attached the NgStyle attribute directive [ngStyle] and then we have given some inline styles here for the color inline-style ‘color’: color. We are assigning it a color that is going to get its value from the input element. And then you can see that the input element has a two-way data-binding.

Then we have font size which is getting its value from the size 'font-size': size + 'px' which would get initialized initially in our app component but then would later change when the user is going to click on the plus or the minus button. So when the user clicks on the plus button we are increasing the size by 1.

And the user clicks on the minus button we are going to decrease the size by 1. Then finally we also have a font-weight property font-weight and here we are hard-coding the value as bold. So using this example we can clearly understand how we can set multiple inline styles using different ways of finding.

How It Work

Now let’s see how this works so we have our style using Ngstyle text being displayed with the font size of 10. What I’m going to do now is to input some color so if I say red then we can see that the text color has been changed to red.

And when we do a green again the color of the text is changing to Green. Now let’s try our plus and minus buttons here. So if you click on the plus button you can see that the size of the text is now increasing and when you do a click on the minus then it decreases accordingly.

If you want to learn more see the official website.