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:

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>