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

user_3497671 0
Viewed 20486

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

enter image description here

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

enter image description here

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:

enter image description here

angular-ngselect angular css
4 Answers

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>
user_34976710

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>
user_109229460

To hide the clear and arrow icons: 

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

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

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>
user_61646780
Related