Conditional row background color change in angular using ngClass | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Conditional row background color change in angular using ngClass

In this tutorial, we are going to see how we can use ngClass in ngFor directive as per any given condition so we will use ngFor and ngClass together in this block of code.

Step 1: Create a model class (employee)

First, we will create a model class named employee in the models folder which we will create in the src folder of the angular 8 project. pass following code into employee.ts

export class employee
    id: number;
    name: string;
    address: string;
    salary : number;
    constructor(ids, names, addresses, salaries)
        this.id = ids;
        this.name = names;
        this.address = addresses;
        this.salary = salaries;


In this employee class, we have just created 4 properties and a constructor to initialize employee class properties by constructor arguments.

Step 2: Create new component styleex

ng g c styleex --spec=false

Step 3: Add the following code into styleex.component.css

    background-color: beige;
    background-color: red;
    color: white;
    background-color: aliceblue;
    color: black;
    background-color: burlywood;
    color: white;


import { Component, OnInit } from '@angular/core';
import { employee } from './../models/employee';

  selector: 'app-stylex',
  templateUrl: './stylex.component.html',
  styleUrls: ['./stylex.component.css']
export class StylexComponent implements OnInit {

  setcolor: string = "";
  setfontcolor: string="";
  emp : Array =[];
  constructor() { }

  ngOnInit() {
    this.emp.push(new employee(10,"Yogeshdotnet","Pratap Nagar Jaipur", 60000));
    this.emp.push(new employee(11,"Yogeshdotnet1","Pratap Nagar Jaipur1", 1000));
    this.emp.push(new employee(12,"Yogeshdotnet2","Pratap Nagar Jaipur2", 67000));
    this.emp.push(new employee(13,"Yogeshdotnet3","Pratap Nagar Jaipur3",2000));
    this.emp.push(new employee(14,"Yogeshdotnet4","Pratap Nagar Jaipur4", 78000));
    return {'background-color':'aqua', color: 'red'};
  ChangeColor(value1, value2)
    this.setcolor = value1;
    this.setfontcolor = value2;



  stylex works!
<div [style.background-color]="'yellow'">
  This is My Div

<div [ngStyle]="{color: 'red', 'background-color': 'purple'}" >
 This is My Second Div

<div [ngStyle]="mymethod()">
 This is Third Div

<div [style.background-color]="setcolor" [style.color]="setfontcolor">
  This is Fourth Div
Set Background-Color <input type="text" name="txt1" #txt1 /><br>
Set Font Color <input type="text" name="txt2" #txt2 /><br>
<input type="button" value="Change" (click)="ChangeColor(txt1.value, txt2.value)" />
<table border="1">
  <tr *ngFor="let h of emp;" [ngClass]="{class1: h.salary == 1000, class2: h.salary > 1000, class3: h.salary >1999 && h.salary < 30000}">
    <td>{{ h.id }}</td>
    <td>{{ h.name }}</td>
    <td>{{ h.address }}</td>
    <td>{{ h.salary }}</td>