Styling

[leondroidgeeks]

It looks like the styling is binded to bootstrap buttons. Is it possible to change the style of the selectors without having to change all bootstrap buttons? Just to keep it separate.

[garkuwa]

Seems ng2-select has been not developed for a long time:( I faced the same issue, and done some workround (not nice, but anyway): on component which uses select I added to onChange hook:

..... let btn = this.el.nativeElement.querySelector('span.btn.ui-select-toggle'), input = this.el.nativeElement.querySelector('input.form-control'); if (btn) { btn.classList.remove('form-control'); btn.classList.add('btn-sm'); } if (input) { input.classList.add('input-sm'); } ....... where this.el is ElementRef to current component (in my case I want to use small button styles for select)

[leondroidgeeks]

Thanks garkuwa, that's a nice solution! So in the if clauses I can specify the new styles?

What I did: Since bootstraps specifies multiple button types (default, primary etc.) and ng-select uses the default styles, I separated the styles by changing the default color of ng select accordingly and for the other buttons i switched to the primary type.

[haiflive]

May be help somebody, solution for bootstrap 4

add global css style

.select-sm > .ui-select-container > input.ui-select-search.form-control {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.select-sm > .ui-select-container > div.ui-select-match > span.ui-select-toggle.form-control {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

add class to ng-select

<ng-select
    [items]="index_select"
    [active]="value_index_select"
    (selected)="selectTriggerIndex($event)"
    class="select-sm">
</ng-select>

[optimistex]

Work by supporting Bootstrap 4 was planned: https://github.com/optimistex/ng2-select-ex/issues/5