tui-select disabled

[expdts]

Подскажите пожалуйста, как я могу выделить цветом и заблокировать выбор в tui-select используя tui-data-list-wrapper?
Как ожидается, блокируем выбор и выделяем цветом элемент имеющий isActive = false:

Пример

[waterplea]

Для более точечного контроля используй tui-data-list. Блокировать выбор в tui-data-list-wrapper можно через инпут disabledItemHandler

[expdts]

@waterplea можете показать на моем примере как правильно использовать в моем случае tui-data-list используя formControlName? У меня не получилось.

Не очень понял функционал disabledItemHandler, думал использовать его как функцию. Например так disabledItemHandler="changeData(item)" но не понятно как передать в него объект item, для возврата true или false.

Предполагается использование сложной функции для блокирования и выделения текста цветом. Например может быть такое условие блокирования и выделения цветом: !item.isActive && item.pl.codeId === 2

[waterplea]

В твоём примере вот такая функция подойдёт:

readonly handler = item => !item.isActive

<tui-data-list-wrapper
  *tuiDataList
  [items]="listData"
  [itemContent]="testListDataContent"
  [disabledItemHandler]="handler"
/>

Если использовать tui-data-list, то там все tuiOption будут в шаблоне и можно написать:

<button *ngFor="..." tuiOption [disabled]="!item.isActive" ...

А в стилях прописать:

[tuiOption]:disabled {
  background: pink;
}

[expdts]

Спасибо за пример disabledItemHandler, изначально думал что необходимо всегда использовать TuiBooleanHandler.
Больше всего для моего случая мне подошел tui-data-list. Использование стиля [tuiOption]:disabled мне не подходит. Реализовал через установку стиля в <button ... [style]="{'background': !item.isActive ? 'pink' : ''}", это позволяет сделать только для определенного.