Need to add custom style to the list using ngclass

[Neha Singh]

I need to add custom style to the dropdown list element using ngclass.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Neha,

Greetings from Syncfusion support.

We can customize dropdownlist by overriding the existing css styles using ngClass property of Angular. We also suggest you cssClass property of Dropdownlist which adds the custom class to the dropdownlist wrapper and popup wrapper. We have made sample for your convenience. Please find the sample in the attachment. In that sample, we have overridden the border of dropdownlist color in to blue.

API for cssClass : https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#cssclass

 

 

Using ngClass of Angular             : https://stackblitz.com/edit/angular-ecsy8x?file=app.component.html 

Using cssClass of Dropdownlist : https://stackblitz.com/edit/angular-ecsy8x-aukjyk?file=app.component.html

Hope this will meet your requirement.

Regards, 

Jeyanth. 

[Neha Singh]

Thank you Jeyanth. Actually this is an example using existing class. I need to change the color of option based on some condition. For example in datasource:data array I have parameter like id(number), name(string) and count(number). Instead of giving color to active class I need to give a different color to all the options in dropdown having count property greater than 0.

Can you please help in adding such condition?

Regards

Neha

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Neha,

Thanks for your brief explanation.

We have checked your scenario. We would like to know you that you can customize the color of the li element in the popup using itemCreated event which will trigger on every li element created. In the below sample, we have changed the color of the li element to green based on the condition when count property in the datasource is greater than zero.


 

public sportsData: Object[] = [ 

      { Id: 'Game1', Game: 'American Football', Count: 0 }, 

      { Id: 'Game2', Game: 'Badminton', Count: 1 }, 

      { Id: 'Game3', Game: 'Basketball', Count: 0 }, 

      { Id: 'Game4', Game: 'Cricket', Count: 5 }, 

      { Id: 'Game5', Game: 'Football', Count: 6 }, 

      { Id: 'Game6', Game: 'Golf', Count: 0 }, 

      { Id: 'Game7', Game: 'Hockey', Count: 0 }, 

      { Id: 'Game8', Game: 'Rugby', Count: 3 }, 

      { Id: 'Game9', Game: 'Snooker',Count: 0 }, 

      { Id: 'Game10', Game: 'Tennis', Count: 9 } 

  ]; 

Screenshot:


 

 

Sample Link       : https://stackblitz.com/edit/angular-ecsy8x-8nk698?file=app.component.ts


Regards, 

Jeyanth. 

[Neha Singh]

Thank you :)

It is working as expected

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Neha, 

  

We are glad to know you that your issue has resolved. Please let us know if you need any further assistance on this. 

  

Regards, 

Jeyanth.