Как сделать ng-select только для удаления и чтения

Question

В моем приложении Angular у меня есть экземпляр виджета ng-select :

Если щелкнуть по нему, по умолчанию вы можете искать элементы и добавлять их в текущий выбор:

Я хотел бы изменить это поведение по умолчанию, в частности:

• нельзя не можно добавлять новые элементы
• щелкнув по нему, следует , а не открыть панель поиска или список предметов
• должно не показывать значок стрелки вниз (по умолчанию отображается справа)
• должно , а не показывать значок X для одновременного удаления всех выделенных элементов (по умолчанию отображается справа)

Так вот, как бы я хотел, чтобы это было:

Answer 1

Чтобы отключить значок очистки всех X, добавьте атрибут [clearable]="false" на вкладку ng-select, например ::1003*

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

Answer 2

Чтобы достичь этого, нам сначала нужно создать 3 класса CSS.

Один, чтобы отключить значок стрелки вниз:

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

Один, чтобы отключить поиск / выпадающий список:

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

Один, чтобы отключить значок очистки всех X:

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

Затем мы добавляем элемент ng-select, используя 3 класса CSS, которые мы создали, плюс несколько опций:

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