CODEWITHSUNDEEP
htmlangularjs
1shot2killz
1shot2killz

Reputation: 3

Highlighting a cell in a table when a word is included

I have a table in which I would like to highlight when a special character appears. An example below.

When there is a date entered on 11.2020, the cell should not be highlighted, but when the entry 11.2020+ appears, the background of the text will change to red. How to set such a mask?

My code

<td>
<div style="background-color:red; color:white; font-weight:bold"><span ng-if="data.data=='11.2020'">{{data.data}}</span></div>
</td>

Upvotes: 0

Views: 461

Answers (5)

Snehal S
Snehal S

Reputation: 34

Using AngulaJS

$scope.validate=function(data){
if (/^[a-zA-Z0-9- ]*$/.test(data) == false)
  return true;

 return false;
}

.cell-highlight{
  background-color:red;
  color:white; 
  font-weight:bold;
}

<td>
<div ng-class="{'cell-highlight':validate(data.data)">{{data.data}}</div>
</td>

Upvotes: 0

user12119806
user12119806

Reputation: 53

In angular you can call a function in ngClass to return classes based on your conditions. For Example:

<td>
 <div [ngClass]="getBackgroundColor(data.data)"> {{data.data}</div>
</td>

And in your component file:

public getBackgroundColor(value:string): string {
 if (value === "11.2020")
  return "bg.light"; // or whatever colour you want
 } else if (value.includes("11.2020")) { // or match with your regex
  return "bg.danger";
 }
  return "bg.light";
}

Upvotes: 0

Leon Marzahn
Leon Marzahn

Reputation: 349

You can use ngx-mask. This will automatically prevent the user from typing in a wrong date, makes for a better experience :D

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

.html

<td [style.color]="isValid(data.data) ? 'black' : 'red'">{{data.data}}</td>

.ts

isValid(str) {
  return !/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

Working Demo

Upvotes: 1

hardy charles
hardy charles

Reputation: 23

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

use else of the ngIf condition like this. and if you have problems just read the documentation : https://angular.io/api/common/NgIf

Upvotes: 0

Related Questions