Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text Color for different status Angular 6

I have a view on angular just like this:

enter image description here

And this is my dashboard.component.ts:

 export class DashboardComponent implements OnInit {
 tablePresetColumns;
 tablePresetData;
 ngOnInit() {
   this.tablePresetColumns = [{id: 1,content: 'Username'},{id: 2,content: 'Status'}];
   this.tablePresetData = [[{id: 1,content: '[email protected]'},{id: 2,content: 'Busy'}],[{id: 1,content: '[email protected]'},{id: 2,content: 'overload'}]];
  }
 } 

And this is the way i call the table on dashboard.component:

<div eds-tile class="xl-4" style="height: 700px">
    <eds-tile-title>User on Shift</eds-tile-title>  
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
</div>

eds-table:

selector: 'eds-table',
template: "<table class=\"table\" [ngClass]=\"modes\">\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th *ngFor=\"let col of columns\">\n        {{col.content}}\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of data\">\n      <td *ngFor=\"let cell of row\">\n        {{cell.content}}\n      </td>\n    </tr>\n  </tbody>\n</table>\n",

What should I do, if I want to give some color on Status, I mean there are conditions when status Busy, the text Color change green, or Idle change Yellow, and Overload change into Red.

Help me, guys... Thanks,

like image 244
aldi Avatar asked Feb 07 '19 04:02

aldi


3 Answers

You could make use of ngClass with some conditional check on the data while generating the row as follows,

<table class="table\" [ngClass]="modes\">
    <thead *ngIf="columns\">
        <tr>
            <th *ngFor="let col of columns"> {{col.content}} </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data">
            <td [ngClass]="{
                'busy' : cell.content == 'Busy',
                'idle' : cell.content == 'Idle'
                'overload' : cell.content == 'Overload'
             }" *ngFor="let cell of row"> {{cell.content}} </td>
        </tr>
    </tbody>
</table>

and you should also have a css for the above as,

.busy {
    background-color: green;
}

.idle {
    background-color: yellow;
}

.overload {
    background-color: red;
}
like image 35
Sajeetharan Avatar answered Oct 10 '22 21:10

Sajeetharan


You can use the below

<td *ngFor="let cell of row" 
  [ngStyle]="{'color': (cell.content === 'Busy') ? 'green' : (cell.content === 'overload') ? 'red' : (cell.content === 'idle') ? 'yellow' : ''}">{{cell.content}}
</td>

The condition should be on cell.content but not on row.content

like image 68
dileepkumar jami Avatar answered Oct 10 '22 19:10

dileepkumar jami


<table class="table" [ngClass]="modes">
    <thead *ngIf="columns">
        <tr>
            <th *ngFor="let col of columns"> {{col.content}} </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data">
            <td [ngClass]="cell.content.toLowerCase()" *ngFor="let cell of row"> {{cell.content}} </td>
        </tr>
    </tbody>
</table>

and in css define class for each type of status.

.busy {
  color: red;
  /* other css property you want to add */
}

.idle {
  color: red;
  /* other css property you want to add */
}

.overload {
  color: red;
  /* other css property you want to add */
}

here is stackblitz and in my end it is working fine. I attached this screenshot just for FYI. enter image description here

like image 36
Sadid Khan Avatar answered Oct 10 '22 19:10

Sadid Khan