Feature: Have an API to allow developers to add extra class names to customise look and feel and reuse styles

[classicmike]

Just to give a little context. I'm currently implementing a CSS components library that will have a predefined set of css styles that developers can use and reuse.

Your select dropdown library seems to address most of our requirements but I would like to see if this feature request could be part of your roadmap.

As far as I know you have these css classes such as .ng-option, .ng-option-label.

It would be nice if the ng-select component provides an API that would allow me to inject some CSS classes as Angular @input() parameters. This would add these classes to specific parts of the component such as options, labels, tags input elements, to further customise our dropdowns.

One example of this is Swimlane's ngx data-table allows us add rowClass as part of their @input() to further customise the data-table's row. E.g: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/css.component.ts

Benefits:

• Provides extra flexibility for further styles.
• Avoids extra work to code something that has been defined already but in a different class naming format. We have a set of CSS styles in our components library defining dropdowns already and we wish to use that again for our ng-select. With the current workflow, I would have to duplicate the very same CSS for ng-select which then make our code not DRY and harder to maintain. Yes I know we can add a class to the custom ng-select host tag, but I need control in the children elements.

Here's what I envison the code to look like after the change:
<ng-select class="custom-select" [(ngModel)]="selectedUserIds" [items]="item" dropdownClass="dropdown" dropdownOptionClass="dropdown-item"....></ng-select>

If you can let me know on your 2 cents on it and perhaps that would be great.

Thanks.

[anjmao]

Hi @classicmike,

I guess ngx-datatable adds rowClass so you can add custom styling for rows. But adding custom classes for different internal html parts sounds like a not the best idea because you can do the following:

1. Copy default theme and style tour own according to your component library.
2. Add "custom-select" class and override default themes style for some of the parts you need.

[classicmike]

Hey @anjmao thanks for your reply,

I guess it seems like what you're advocating is overriding the default theme and use the selectors you have available through CSS. I guess I'll probably have to live with that for now but the duplication in the CSS properties is essentially what I wanted to avoid all along.

Anyway just going to put the example scenario down anyway just for some thought:

The scenario would be I have my component library of CSS styles, which is then consumed by product A, an angular app.

Currently my component library, for example, would have a set of styles as follows(Not my proper styles, Only demo purposes):

/** IN MY COMPONENT LIBRARY **/
.custom-select {
    border: 1px solid red;
    color: black;
}

.dropdown-item {
    border: 1px solid blue;
    color: red;
}

.dropdown-menu {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); 
}

Now in Product A, I would then have to style the ng-selects as follows:

/*** PRODUCT A OVERRIDES FOR NG-SELECT. **/
.ng-dropdown-item {
    border: 1px solid blue;
    color: red;
}

.ng-dropdown-panel {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); 
}

As you can see, I will have to repeat those styles again.

Anyway, it is what it is, thanks for your feedback.

[anjmao]

It is make sense to add new Input dropdownCssClass.