Search code examples
angulartypescriptautocompleteangular9

Hide place holder in ng-select when user enters text

I am trying to use ng-select with material design in my Angular 9 project for the autocomplete. By default, when the user entering the text ng-select shows the place holder at top of the autocomplete input field. However, I would like to hide the placeholder as soon as the user enters the text and show it when he clears the input field. Is there a way to achieve this using CSS? Project uploaded to StackBlitz for reference

Solution

  • I would recommend using the search event provided by the element. It'll provided you with the value of the input and in your case you only care if it has a value. There exists a css solution, but this just felt cleaner.

    In the html

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

    In the TS. 

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

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