Need to add custom style to the list using ngclass

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

5 Replies 1 reply marked as answer

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team August 26, 2020 10:33 AM UTC

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. 



NS Neha Singh August 31, 2020 06:44 AM UTC

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


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 1, 2020 12:54 PM UTC

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 sportsDataObject[] = [ 
      { 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:


 
 
Jeyanth. 


Marked as answer

NS Neha Singh September 14, 2020 06:12 AM UTC

Thank you :)
It is working as expected


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 15, 2020 05:30 AM UTC

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. 


Loader.
Up arrow icon