CODEWITHSUNDEEP
angulartypescriptautocompleteangular9
Pavan Jadda
Pavan Jadda

Reputation: 4871

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

Upvotes: 0

Views: 2439

Answers (1)

student dev
student dev

Reputation: 132

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': '';
}

Upvotes: 1

Related Questions