Скрыть заполнитель в ng-select, когда пользователь вводит текст

Question

Я пытаюсь использовать ng-select с дизайном материала в моем проекте Angular 9 для автозаполнения. По умолчанию, когда пользователь вводит текст, ng-select показывает заполнитель в верхней части поля ввода автозаполнения. Однако я хотел бы скрыть заполнитель, как только пользователь вводит текст, и отображать его, когда он очищает поле ввода. Есть ли способ добиться этого с помощью CSS? Проект загружен в StackBlitz для справки

Answer 1

Я бы рекомендовал использовать событие поиска, предоставленное элементом. Он предоставит вам значение ввода, и в вашем случае вам важно только, если оно имеет значение. Существует решение css, но оно стало чище.

В html

<ng-select ...
   placeholder="{{myPlaceholder}}"
   (search)="onSearch($event)">
  </ng-select>

В ТС.

.
.
myPlaceHolder = "Select Person"
.
.
onSearch($event) {

 this.myPlaceHolder = $event.term == '': 'Select Person': '';
}