Ng-Select do not disable element with Bootstrap 4

Question

I am using ng-select (https://github.com/ng-select/ng-select) in my Angular 6 project and I upgraded recently to Bootstrap 4.

Since then, I noticed that my custom logic to disable elements is now not working anymore.

<ng-select
    style="width: 500px;"
    [multiple]="true"
    [(items)]="usersList"
    [closeOnSelect]="false"
    [isOpen]="toggleUsersPicker"
    [(ngModel)]="selectedPeople"
    [virtualScroll]="true"
    (add)="onAdd($event)"
    (remove)="onRemove($event)"
    (clear)="onClear()"
    (change)="onChange()"
    placeholder="Select people"
    bindLabel="label">

    <ng-template ng-header-tmp>
      <button (click)="selectAll()" class="btn btn-light margin10">Select all</button>
      <button (click)="unselectAll()" class="btn btn-light margin10">Unselect all</button>
    </ng-template>

    ...

</ng-select>

Then my logic to disable elements.

  selectAll() {
       this.selectedPeople = [];
       this.selectedPeople.push({label: 'All'});
       this.selectedNumber = this.usersList.length;

       const usersListTmp = this.usersList.slice();
       for (const u of usersListTmp) {
       u.disabled = true;
       }
       this.usersList = usersListTmp;

       this.onChange();
  }

The definition of the target variables is like this:

  selectedPeople: NgOption[] = [];
  usersList: NgOption[] = [];

Anyone who had the same problem?

Answer 1

Make sure that you reference Bootstrap CSS and the folwing JS libraries: jQuery must come first, then Popper.js, and then Bootstrap JS.

Dropdowns in Bootstrap 4 requires Popper.js for displaying and positioning.

Answer 2

Instead of [disabled], using [readonly] attribute should solve the issue.

<ng-select
    [readonly]="true"
</ng-select>