Angular ngStyle Directive

Back to: Angular Tutorials For Beginners and Professionals

Angular ngStyle Directive

In this article, I am going to discuss Angular ngStyle Directive in detail. Please read our previous article where we discussed Angular ngSwitch Directive with examples. At the end of this article, you will understand what exactly ngStyle Directive is and when and how to use ngStyle directive in Angular Application?

What is the Angular ngStyle Directive?

The ngStyle directive is used to set the DOM element style properties. For example, if you want to create a button with font size 20, the color red and font-weight bold, then you could do the same using the Angular ngStyle directive as shown in the below image.

Let’s implement this and see the output in the browser.

Step1: Modify the app.component.ts file

Please copy and paste the following code in your app.component.ts file.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })

  export class AppComponent {
  }

Step2: Modify the app.component.html file

Please modify the app.component.html file as shown below.

<div>
  <button [ngStyle]="{'color':'red',  'font-weight': 'bold', 'font-size.px':20}">Click Me </button>
</div>

Now run the application and see the output in the browser and you should get a button with red color, font size 20 and font-weight bold as shown in the below image.

Instead of hard coding the styles directly in the ngStyle directive, you can also create a method in your component and then bind that method to the ngStyle directive. Let us implement this.

Modify app.component.ts file:

Please modify the app.component.ts class file as shown below. Here, we created one method i.e. AddButtonCSSStyles which returns an object with three key-value pair properties. The key here is nothing but the style name and the value is the value of that respective style property.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })

  export class AppComponent {
    AddButtonCSSStyles() {
      let CssStyles = {        
          'color':'red',
          'font-weight': 'bold',
          'font-size.px': 20
      };
      return CssStyles;
    }
  }

Modify app.component.html file:

Please modify the app.component.html file as shown below. As you can see, now the ngStyle directive is bounded to the AddButtonCSSStyles () method of the AppComponent class.

<div>
  <button [ngStyle]="AddButtonCSSStyles()">Click Me </button>
</div>

Now, run the application and you should the output as expected.

Angular ngStyle directive with dynamic values:

The ngStyle directive becomes more effective when the value is dynamic. For example, let say we have a list of students and we want to display the student list on a webpage as shown below. When the student gender is male we want to display that record in red color else we want to display the student in green color.

Let see how to implement this.

Step1: Modify the app.component.ts file

Please modify the app.component.ts file as shown below.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })

  export class AppComponent {
    students: any[] = [
      {
          Name: 'Preety', Branch: 'CSE', Gender: 'Female'
      },
      {
          Name: 'Anurag', Branch: 'ETC', Gender: 'Male'
      },
      {
          Name: 'Priyanka', Branch: 'CSE',  Gender: 'Female'
      },
      {
          Name: 'Hina', Branch: 'ETC', Gender: 'Female'
      },
      {
          Name: 'Sambit', Branch: 'CSE', Gender: 'Male'
      }
    ]; 
  }

Step2: Modify the app.component.html file

Now modify the app.component.html file as shown below.

<div *ngFor='let student of students'>
   <span [ngStyle] ="{'background-color':student.Gender === 'Male' ? 'red' : 'green'}">Name : {{student.Name}}, Gender: {{student.Gender}}, Branch: {{student.Branch}}</span>       
</div>

Now, if you run the application, then you should get the output as expected.

Please read our Angular Style Binding article to know the different options to bind style attributes in Angular Applications.

In the next article, I am going to discuss Angular ngClass Directive with some examples. Here, in this article, I try to explain the Angular ngStyle directive with some examples. I hope you enjoy this article and understand the connect ngStyle directive in angular application.