HTML Table Conditional Cell Color Using Angular

HTML Table

HTML table is generally used to display data in tabular format in rows and columns. Each row contains one or more columns to display data. Each row is indicated by <tr/> tag, whereas each column is indicated by <td/> tag. The HTML table is indicated by <table/> tag. The HTML table header is indicated by <thead/> and body is indicated by <tbody/> tag.

In this example I am going to show you how you can change the background color of cells or columns in HTML table based on different cell data. Therefore, based on certain conditions you can change the color of cell dynamically. I am going to use [ngStyle] attribute to change the background color of the columns.

Related Post:

Prerequisites

Angular 14.1.1, Node 16.12.0, Npm 8.1.0

How to create Angular project

Conditional Cell Color

Your data may come from service (REST, SOAP or any external source) and you want to display data in the HTML table. Here I am using some static data in an array to populate HTML table on the view file.

View File

The view file just displays data in tabular format. Here I have used [ngStyle] attribute in some columns or cells of the table. The file src/app.component.html file has the following code:

<table id="sales-info" border="1" cellpadding="4" cellspacing="1" style="margin: auto;">
	<thead>
		<tr>
			<th>Product Id</th>
			<th>Price</th>
			<th>Sale Price</th>
			<th>Sales Count</th>
			<th>Sale Date</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let product of products">
			<td [ngStyle]="{'background-color': getColor(product.id)}">{{product.id}}</td>
			<td [ngStyle]="{'background-color': getColor(product.price)}">{{product.price}}</td>
			<td [ngStyle]="{'background-color': getColor(product.sale_price)}">{{product.sale_price}}</td>
			<td [ngStyle]="{'background-color': getColor(product.sales_count)}">{{product.sales_count}}</td>
			<td>{{product.sale_date}}</td>
		</tr>
	</tbody>
</table>

I am changing the background color of the cell and I am using getColor() function which is written into TypeScript file to get the appropriate color value.

I am using here RGBA() function to compute the color value, you may also use the simple value like ‘red’, ‘green’, etc. to apply the color to the cell.

App Component TypeScript

The app component type script file where I have loaded static array data and written the getColor() function. The src/app.component.ts file has the following code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
	products: Array<any> = [
		{ id: 1, price: 30000, sale_price: 35000, sales_count: 55, sale_date: '02-04-2018'},
		{ id: 2, price: 30300, sale_price: 37030, sales_count: 43, sale_date: '03-04-2018'},
		{ id: 3, price: 39010, sale_price: 48700, sales_count: 145, sale_date: '04-04-2018'},
		{ id: 4, price: 15000, sale_price: 17505, sales_count: 251, sale_date: '05-04-2018'},
		{ id: 5, price: 18000, sale_price: 22080, sales_count: 178, sale_date: '05-04-2018'},
		{ id: 6, price: 30500, sale_price: 34040, sales_count: 58, sale_date: '05-04-2018'},
		{ id: 7, price: 2000, sale_price: 2500, sales_count: 68, sale_date: '06-04-2018'},
		{ id: 8, price: 45871, sale_price: 55894, sales_count: 165, sale_date: '07-04-2018'}
	];
	
	getColor(value: number): string {
		if (value >=0 && value <=15) {
			return 'RGBA(255,198,191,0.4)';
		} else if (value > 15 && value <=20) {
			return 'RGBA(170,214,136,0.4)';
		} else if (value > 20 && value <=25) {
			return 'RGBA(152,195,119,0.6)';
		} else if (value > 25 && value <=30) {
			return 'RGBA(139,189,120,0.9)';
		} else if (value > 30 && value <=60) {
			return 'RGBA(94,167,88,0.9)';
		} else if (value > 60 && value <=150) {
			return 'RGBA(88,157,65,0.3)';
		} else if (value > 150 && value <=10000) {
			return 'RGBA(95,160,97,0.6)';
		} else if (value > 10000 && value <=20000) {
			return 'RGBA(105,170,90,0.7)';
		} else if (value > 20000 && value <=30000) {
			return 'RGBA(115,164,76,0.6)';
		} else if (value > 30000) {
			return 'RGBA(98,143,94,0.4)';
		} else {
			return 'RGBA(70,135,90,0.2)';
		}
	}
  
}

In the above code you can replace by HEX value or simple color name, such as, ‘green’, ‘brown’, etc. instead of using the function RGBA() to apply the appropriate colors.

Testing Conditional Cell Colors

Once you run the Angular application using the command ng serve on project’s root folder and access URL http://localhost:4200 in the browser, you can see the following output in the browser:

html table conditional cell color

Hope you got an idea how to apply color (dynamic styles) to HTML table cells based on condition.

Source Code

Download

Leave a Reply

Your email address will not be published.