Surrounding specific HTML text with specific color

Question

I have the a Status parameter for my HTML table which could take values such as :

I want to surround the text with a specific color depending on the value it takes. I am working with Angular 4 (HTML and TypeScript).

Any pointers to solve this problem?

Define styles in a class for each status and toggle that class using `ngClass`. Example, `[ngClass]="{'success': status === 'SUCCESS', 'failure': status === 'FAILURE', 'in-progress': status === 'IN PROGRESS'}"` — karthikaruna, Nov 16 '17 at 06:21
What exactly do you mean by "surround the text with a specific color"? Text stroke? Shadow? Background? Border around the text element? What does your HTML look like right now? — Brad, Nov 16 '17 at 06:23
@Brad Yes I know that, what my question is how do I vary background color depending on the content of the text. — Abhijeet Mohanty, Nov 16 '17 at 06:26

D. Pareek · Answer 1 · 2017-11-17T05:43:46.890

0

Try this, I did not test this but hope this helps:

[ngStyle]="{'background-color':status === 'SUCCESS' ? 'green' : status === 'FAILURE' ? 'red' : 'blue'}

edited Nov 17 '17 at 05:43

answered Nov 16 '17 at 06:29

D. Pareek

Please note that original author is using angular 4, your solution is for angularjs. – Patryk Brejdak Nov 16 '17 at 06:42
Yes I am using Angular 4.@Szarik – Abhijeet Mohanty Nov 16 '17 at 06:51
1

Oh! Sorry I missed that, So you can prefer this link to understand NgStyle and NgClass https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/ Above link for Angular 5 but it supports 4 , just sent for update – D. Pareek Nov 16 '17 at 06:54
update your answer – Jota.Toledo Nov 16 '17 at 07:06
@D.Pareek The link helped me. Could you put it up as an answer so it helps others. People are anyways hell bent on downvoting this question. – Abhijeet Mohanty Nov 16 '17 at 10:51

1 Answers1