"Angular 6: A Guide to Customizing Text Colors Based on Status

Question

"Angular 6: A Guide to Customizing Text Colors Based on Status

I have a view on angular just like this:

https://i.sstatic.net/JimWN.png

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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33595c5b5d1d575c567341525d575c5e1d505c5e">[email protected]</a>'},{id: 2,content: 'Busy'}],[{id: 1,content: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d9c8a8dcbb98b98979d9694d79a9694">[email protected]</a>'},{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",

If I want to add color based on different statuses, such as changing Busy text to green, Idle to Yellow, and Overload to Red, what should I do?

I appreciate your help.

html css angular less angular6

Answer 1

Answer №1

Here is an example of how you can utilize the following code snippet:

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

Make sure to apply the condition on cell.content, not row.content.

Answer 2

Here is an example of how you can utilize the following code snippet:

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

Make sure to apply the condition on cell.content, not row.content.

Answer 3

Answer №2

To create dynamic styling based on data conditions, utilize ngClass when building the table rows:

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

Add corresponding CSS to style the elements as needed:

.busy {
    background-color: green;
}

.idle {
    background-color: yellow;
}

.overload {
    background-color: red;
}

Answer 4

To create dynamic styling based on data conditions, utilize ngClass when building the table rows:

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

Add corresponding CSS to style the elements as needed:

.busy {
    background-color: green;
}

.idle {
    background-color: yellow;
}

.overload {
    background-color: red;
}

Answer 5

Answer №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>

Create a unique class for each type of status in the CSS:

.busy {
  color: red;
  /* Add any other desired css properties */
}

.idle {
  color: blue;
  /* Add any other desired css properties */
}

.overload {
  color: green;
  /* Add any other desired css properties */
}

View the code in action on StackBlitz. I have personally tested it and attached a screenshot below for reference: https://i.sstatic.net/o6sXM.png

Answer 6

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

Create a unique class for each type of status in the CSS:

.busy {
  color: red;
  /* Add any other desired css properties */
}

.idle {
  color: blue;
  /* Add any other desired css properties */
}

.overload {
  color: green;
  /* Add any other desired css properties */
}

View the code in action on StackBlitz. I have personally tested it and attached a screenshot below for reference: https://i.sstatic.net/o6sXM.png

"Angular 6: A Guide to Customizing Text Colors Based on Status

Answer №1

Answer №2

Answer №3

Similar questions

Mini-navigation bar scrolling

Is it possible for the Chrome mobile camera to take up the full screen size on

Getting the Most Out of .find() in Angular 4

Update the Angular component once new data is saved in a separate Angular component

Could the repeated utilization of BehaviorSubject within Angular services indicate a cause for concern?

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

The fine balance between a horizontal <img> and a <div> element

Fixing issues with internal web page connections (#x) present in the HTML code (href="#x" id="x")

The designated apiUser.json file could not be located within the _http.get() function

Updating color of an element in SVG and Angular2+ according to the background

Locate and refine the pipeline for converting all elements of an array into JSON format using Angular 2

ngc encountering issues when compiling project with untyped third-party libraries

How to create a slideToggle effect for nested ul and li elements

Formulate a jQuery array consisting of droppable components

One way to automatically create unique reference numbers is to generate a random number between 1 and 99 and append it to a date format, such as YYMMDD. For example,

The onClick event in ReactJs appears to be ineffective when used with a button HTML element

Adjusting text size in iOS7 when converting HTML to NSAttributedString

I'm having trouble adjusting the background color in the bootstrap template

Utilize jQuery to alter the presentation in a distinct field

Use CSS and JavaScript to create a visually appealing and interactive tree structure. Give the tree a dynamic design