How to apply css in ng2-completer based on condition?

Question

I am using ng2-completer in my angular 2 application. Is there anyway where I can style or apply css the content in completer dropdown based on some condition. I have contents like RED, BLUE, GREEN ....so on. I want the item RED to have red background color and likewise for the other items in dropdown. Thanks.

Answer 1

You can add class conditionally as below:

[class.classname]="condition == true"

or using ngClass as below:

[ngClass]="{'classname': condition == true}"

You can write different class and add them conditionaly.

Answer 2

You can first add the condition to the ng2-completer like:

<ng2-completer [ngClass]="{'red': isRedColor()}" ...></ng2-completer>

Then force the css to apply by adding a deep selector

host: >>> ng2-completer.red .completer-row { background:red; }

And so on for the other colors.