CODEWITHSUNDEEP
javascriptangulartypescript
Matej
Matej

Reputation: 43

Set color of text and change icon based on data text

I am working with Angular/typescript and I am getting live data from base and ordering it in table.

My question is how can I change color of text and add different icon based of what do I get. I got this 

  <td>
      {{ item.status49 }}
   </td>

[In the end, I would like to have something like this][1] but of course as one or another

And I got 4 possible text status so If else will not work for me, I think

Upvotes: 1

Views: 456

Answers (2)

Caro
Caro

Reputation: 650

You could do:

<div *ngIf="condition1">
      your text + your icon
</div>
<div *ngIf="condition2">
      text2 + icon2
</div>
<div *ngIf="condition3">
      text3 + icon3
</div>

or you can use ng-container:

<td>
  <ng-container *ngIf="condition1"> your text + icon</ng-container>
  <ng-container *ngIf="condition2"> your text + icon</ng-container>
...
</td>

or 

<div [ngSwitch]="item.status49">
   <ng-container *ngSwitchCase="'open'"> </ng-container>
   <ng-container *ngSwitchCase="'close'"></ng-container>
</div>

Upvotes: 1

Tony
Tony

Reputation: 910

Use [class] and change dynamically:

<p [class]="visible ? 'green' : 'red'">
    Start editing to see some magic happen :)
</p>

For Reference

https://stackblitz.com/edit/angular-bbvwxr

Upvotes: 4

Related Questions