Currently, I am in the process of building a web application using Angular. The main goal is to create a grid and color specific cells based on data input.
Below is the snippet of my HTML code:
<mat-grid-list cols="10">
<mat-grid-tile *ngFor="let cell of cells" [style.background]="cell.color" [ngStyle]="{'background-color':getCellColor(cell)}">
{{cell.id}}
</mat-grid-tile>
Here is the TypeScript code that complements the above HTML code:
getCellColor(cell){
var withinA = false;
var withinB = false;
if (this.distance >= cell.minDistanceToA && this.distance <= cell.maxDistanceToA && this.distance > 0 ) {
withinA = true;
}
if (this.distance2 >= cell.minDistanceToB && this.distance2 <= cell.maxDistanceToB && this.distance2 > 0 ) {
withinB = true;
}
if(withinA && withinB){
return "red";
}
else{
return "green";
}
}
The functionality is working as expected so far.
https://i.sstatic.net/p8PFa.png
I now have a requirement to include an image icon within the red-colored cells but I haven't found a solution yet.