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:

Biotechnology

Answer 1

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>

Biotechnology

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; } – Oneiromancy

Answer 2

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>

Kamila

Answer 3

If someone is looking to do that simply in 2023 you just have to add readonly to true to the ng-select element:

[readonly]="true"

cf documentation : https://github.com/ng-select/ng-select

Whereto

Answer 4

To hide the clear and arrow icons:

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

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

Halfhour

Answer 5

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>

Oman

Answer 6

Nothing worked to me except this code

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

Camail