Conditional row background color change in angular using ngClass

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

input[type='text']{
    background-color: beige;
}
.class1
{
    background-color: red;
    color: white;
}
.class2
{
    background-color: aliceblue;
    color: black;
}
.class3
{
    background-color: burlywood;
    color: white;
}

styleex.component.ts

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

@Component({
  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));
  }
  mymethod()
  {
    return {'background-color':'aqua', color: 'red'};
  }
  ChangeColor(value1, value2)
  {
    this.setcolor = value1;
    this.setfontcolor = value2;
  }

}

styleex.component.html

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

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

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

</div>
<div [style.background-color]="setcolor" [style.color]="setfontcolor">
  This is Fourth Div
 
 </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)" />
<hr>
<table border="1">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Location</th>
    <th>Salary</th>
  </tr>
  <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>

  </tr>

</table>