How to display green color if count parts for product > 0 and red if count parts for product is < 0 ?

[ahmed elbarbary]

I already have web api function do count for parts related to product based on name of product pass to it

 

suppose I pass car to web api function

 

then it will return how many parts exist on product table  that car contain it

 

so if product table have many parts on table product then count will be bigger from 0

 

then it will show count as green 

 

and if is count equal 0 then it will count returned as red for product  

 

so my url return integer value as 5 represent number of parts for product

 

and may be 0 that mean no parts for product 

 

How to display count by color green if count more than 0 

and red if less than 0 

 

How to write service and component.ts and component view by angular 7

 

service 

localhost:5050/api/countparts/Car it will return integer value

component.ts

how to display returned value when bigger than 0 then green else equal then red

on component.html 

5 green

0 red

[Soja C]

Hi,

ngClass will helps you achieve this requirement.

[ahmed elbarbary]

Can you give me more details answer by coding

if possible

thanks

[André Sauder]

<div ng-class="part.count > 0 ? 'css_class_green' : 'css-class-red'">{{part.count}}</div>

[manish pamnani]

You can use angular directive [ngStyle] to acheive the desired result. 

in component.html:

[style.color]="getColor(part.count)"

in component.ts:

getColor(count) {

    if (count > 0) {

      return 'green';

    } else {

      return 'red';

    }

You can refer to this article for more info:

https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/

Hope it helps.