0

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.

Rahul B
  • 69
  • 1
  • 4

2 Answers2

0

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.

Harun Or Rashid
  • 5,589
  • 1
  • 19
  • 21
  • Thanks for the quick reply. But to set the 'condition' I need to get the value of the ng2-completer dropdown content and then apply the condition. Lets say I have 3 items in dropdown namely; red, green and blue. How can I access these items during dropdown load and then apply the class using ngClass? – Rahul B Oct 02 '18 at 13:01
  • You have the data before make it dropdown. You can select after get the data from service or something ... You can also get help of `(selected)="selected($event)"` – Harun Or Rashid Oct 02 '18 at 13:08
0

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.

callback
  • 3,981
  • 1
  • 31
  • 55