Angular ngStyle Directive With Examples

Using Angular ngStyle directive you can set the CSS properties for the containing HTML element. Style properties are specified as colon-separated key-value pairs. The key is a style name, with an optional .<unit> suffix (such as 'top.px', 'font-style.em'). The value is an expression to be evaluated.

For example-

Here font-style, color and background-color CSS properties are set for the containing div element using ngStyle.

<div class="container">
  <div [ngStyle]="{'font-style':'italic', color:'white', 'background-color':'blue'}">
    Text styled using ngStyle
  </div>
</div>

Using ngStyle directive dynamically

The real benefit of using ngStyle is when the value is dynamic. The values that you assign to ngStyle can be an expression and the result of that expression is assigned as the value of the CSS property. Here is an example to show that.

In the example there is a Model class Student with 3 marks fields and the color of the mark is changed as per the conditions which are defined with in a function in TypeScript file.

student.model.ts

export class Student {
  name : string;
  rollNo : number;
  mark1 : number;
  mark2 : number;
  mark3 : number;
  constructor(name: string, rollNo : number, mark1 : number, mark2 : number, mark3 : number) {
    this.name = name;
    this.rollNo = rollNo;
    this.mark1 = mark1;
    this.mark2 = mark2;
    this.mark3 = mark3;
  }
}

Component class

import { Component } from '@angular/core';
import { Student } from './user/student.model';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  students: Student[];

  constructor(){
    // Adding Student instances to students array
    this.students = [
      { name: 'John', rollNo: 2, mark1:55, mark2:79, mark3:85 },
      { name: 'Peter', rollNo: 5, mark1:35, mark2:50, mark3:65 },
      { name: 'Brij', rollNo: 7, mark1:85, mark2:90, mark3:92 }
    ];
  }
  
  getMarkColor(mark){
    if(mark >= 75)
      return 'green';
    else if (mark > 50 && mark < 75)
      // Color Amber
      return '#FFBF00';
    else
      return 'red';
  }
}

In the Component class there is an array of type Student and student instances are added to that array in the constructor.

There is also a function getMarkColor() that has conditions for returning the color for the marks.

Template (html file)

<div class="container">
  <h2 [ngStyle]="{'font-size.px':30}">Student Details</h2>
  <table class="table table-sm table-bordered m-t-4">
    <tr>
      <th>Name</th>
      <th>Roll No</th>
      <th>Mark1</th>
      <th>Mark2</th>
      <th>Mark3</th>
    </tr>
    <tr *ngFor="let student of students">
      <td>{{student.name}}</td>
      <td>{{student.rollNo}}</td>
      <td [ngStyle]="{'color':getMarkColor(student.mark1)}">{{student.mark1}}</td>
      <td [ngStyle]="{'color':getMarkColor(student.mark2)}">{{student.mark2}}</td>
      <td [ngStyle]="{'color':getMarkColor(student.mark3)}">{{student.mark3}}</td>
    </tr>
  </table>
</div>

In the html file ngStyle directive is used with the <h2> element to set the font size. Notice the inclusion of unit while setting font size [ngStyle]="{'font-size.px':30}"

In the table student details are displayed by iterating through the array using ngFor directive. For setting the color of the text ngStyle directive is used. Function getMarkColor() is used by passing the mark to dynamically get the value for the ‘color’ property.

That's all for this topic Angular ngStyle Directive With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

---

Related Topics

1. Angular ngFor Directive With Examples
2. Angular ngIf Directive With Examples
3. Angular ngClass Directive With Examples
4. How to Add Bootstrap to Angular Application
5. Angular First App - Hello world Example

You may also like-

1. Angular @Input and @Output Example
2. Angular - Call One Service From Another
3. Angular Reactive Form Example
4. Angular Routing Concepts With Example
5. Transaction Management in Java-JDBC
6. Reflection in Java - Getting Method Information
7. getPath(), getCanonicalPath() and getAbsolutePath() Methods in Java
8. Spring Expression Language (SpEL) With Examples