How to make ng-select remove-and-read-only

Question

In my Angular application, I have an instance of the ng-select widget:

If you click on it, by default you can search for items and add more of them to the current selection:

I would like to change this default behaviour, in particular:

it shouldn not be possible to add new elements
clicking on it should not open the search bar or the items list
it should not show the arrow down icon (displayed by default on the right)
it should not show the X icon to remove all selection at once (displayed by default on the right)

So this is how I would like it to be:

score 11 · Accepted Answer · answered Sep 13 '18 at 14:53

In order to achieve this, we first need to create 3 css classes.

One to disable the arrow-down icon:

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

One to disable the search/list dropdown:

.ng-select.disable-dropdown ng-dropdown-panel {
  display: none;
}

One to disable the clear-all X icon:

.ng-select.disable-clear-all .ng-clear-wrapper {
  display: none;
}

Then we add the ng-select element using the 3 css classes that we created, plus a few options:

<ng-select
  class="disable-arrow disable-dropdown disable-clear-all"
  [searchable]="false"
  [clearable]="true"
  [multiple]="true"
>
</ng-select>

Thanks for the answer, one minor thing: When this is selected now the corner radii change from rounded so I added this code to prevent that ```.ng-select.ng-select-opened.ng-select-bottom > .ng-select-container { border-bottom-right-radius: 4px !important; border-bottom-left-radius: 4px !important; }``` — James Mundy, Jan 07 '20 at 11:08

Agnieszka J. · Answer 2 · 2019-01-16T15:10:36.230

3

To disable the clear-all X icon add [clearable]="false" attribute to your ng-select tab ex.:

<ng-select class="disable-clear-all" [clearable]="false" [searchable]="false">
</ng-select>

edited Jan 16 '19 at 15:10

answered Jan 16 '19 at 14:48

Agnieszka J.

score 0 · Answer 3 · edited Aug 21 '19 at 11:41

0

To hide the clear and arrow icons:

.ng-clear-wrapper {display: none;}

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

edited Aug 21 '19 at 11:41

Basel Issmail

answered Aug 21 '19 at 11:23

Jasmin

score 0 · Answer 4 · answered Jan 22 '21 at 15:11

0

Below is only what u need if u need it programmatically.

<ng-select
    [items]="people3"
    bindLabel="name"
    [disabled]="true"
    [multiple]="true"
    [(ngModel)]="selectedPeople3">
</ng-select>

answered Jan 22 '21 at 15:11

Nadeeshan Herath

4 Answers4