How to remove 'ng-select' dropdown arrow in Angular?

53 Views Asked by At

How to remove 'ng-select' dropdown arrow in Angular?

<div class="col-md-6">
      <ng-select
        id="selectServiceType"
        [items]="clientServiceTypes$ | async"
        placeholder="Select service type"
        bindLabel="name"
        [(ngModel)]="selectedServiceType"
        [clearable]="false"
        [readonly]="fieldNotEditable() || serviceTypesReadonly"
      ></ng-select>
    </div>

enter image description here

2

There are 2 best solutions below

0
WhackinMyKeyboard On

Add this style to your global styles.css file.

.ng-arrow-wrapper {
  display: none !important;
}
0
heimo44 On

in your css: try this:

.ng-select .ng-arrow-wrapper {
  display: none;
}

or this:

.ng-select .ng-arrow-wrapper .ng-arrow {
  border-color: none !important;
  border-style: none !important;
  border-width: 0 !important;
}