Tuesday, April 7, 2020

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.

Angular ngStyle directive example

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. How to Add Bootstrap to Angular Application
  4. Angular First App - Hello world Example

You may also like-

  1. Angular Example to Render Multiple Rows
  2. Angular @Input and @Output Example
  3. Transaction Management in Java-JDBC
  4. getPath(), getCanonicalPath() and getAbsolutePath() Methods in Java
  5. Reflection in Java - Getting Method Information
  6. Array in Java With Examples
  7. Spring Expression Language (SpEL) With Examples

No comments:

Post a Comment