Text Color for different status Angular 6

Question

I have a view on angular just like this:

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,

Solution 1

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

Solution 2

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;
}

Solution 3

<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.

Comments

[dileepkumar jami]

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

[Sadid Khan]

@Sajeetharan do we need to check if the content is status type like busy or idle..?? because it will not work for email eventually and thus it will work for status type because it will update css if it finds the class

[aldi]

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 [ngStyle]="{'color': (cell.content === 'Busy') ? 'green' : (cell.content === 'overload') ? 'red' : (cell.content === 'idle') ? 'yellow' : ''}">{{cell.content}}\n </td>\n </tr>\n

[dileepkumar jami]

In the else clause of idle, it should be (cell.content === 'idle') ? 'yellow' : ' '

[dileepkumar jami]

Use single quotes with nothing inside. You are using a doubte quote it seems

[aldi]

Not at all @Sadid Khan , im still trying your solution righnow via stackblitz

[Sadid Khan]

I create the stackblitz as a demo. It perfectly change the colour of text if it matches a class like busy, idle or overload. I completely have no idea why it is downvoted.

[Sadid Khan]

what is error you are facing? can you give me an screenshot of it?

[aldi]

can you give me some example, how to enter your answer in my template of eds-table? because in my side, it given error when i tried to combine your answer into my eds-table template

[aldi]

Let us continue this discussion in chat.