CODEWITHSUNDEEP
angularhtmlvalidation
DarkW1nter
DarkW1nter

Reputation: 2851

change table row color in Angular 6 / HTML5 based on a date value

Is there a way to validate within HTML so that I can change the background color of this row if Item.ItemDate < current date?

<td class="text-danger">{{ Item.ItemDate | date:"MM/dd/yyyy 'at' h:mma" }}</td>

Upvotes: 0

Views: 4665

Answers (3)

Omid Farhang
Omid Farhang

Reputation: 46

You can use NgClass condition:

<td class="text-danger" [className]="Item.ItemDate.toDateString() < today.toDateString() ? 'yesterday' : 'tomorrow'">{{ Item.ItemDate | date:"MM/dd/yyyy 'at' h:mma" }}</td>

Where 'tomorrow' and 'yesterday are classes in your css.

Upvotes: 2

Asanka
Asanka

Reputation: 1648

You can do

<td class="text-danger" [class.red]="Item.ItemDate < current date">{{ Item.ItemDate | date:"MM/dd/yyyy 'at' h:mma" }}</td>

In css

.red{
 background-color: red;
}

Upvotes: 1

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6568

yes you can achieve this by using [ngClass] or [ngStyle] directive to set an elements classes or style dynamically.

using 

[ngStyle]="{'background-color':Item.ItemDate < current_date ? 'green' : 'red' }"

or 

[ngClass]="{'text-danger':Item.ItemDate < current_date }"

more example here

please note you are comparing here a date so both the variable should be of date data type

Upvotes: 3

Related Questions