I am trying to display an input text on top of the drop-down item list, for the purpose to search the. I know there you can there is a functionality just for that (<ng-template pTemplate="filter">). But whatever I do, I can't manage to make it render.
HTML:
<p-dropdown [options]="this.colaboradoresList" [(ngModel)]="this.currentColaborador" placeholder="Selecionar Colaborador" appendTo="body" filterBy="nomeCompleto" optionLabel="nomeCompleto">
<ng-template pTemplate="filter">
<span class="p-float-label">
<input id="search-box" type="text" pInputText (input)="this.onSearchInput($event)">
<label for="search-box">Procurar Colaborador</label>
</span>
</ng-template>
</p-dropdown>
TypeScript:
onSearchInput(event) {
if (event.value.trim().length == 0 || event.value.trim() == '') {
this.colaboradoresList = [];
return;
}
this.searchColaboradores.next(event.value); /* GET request to api */
event.stopPropagation();
return false;
}
this.colaboradoresList is only supposed to be filled after I input something in the searchbar. It is initialized as [] (empty)
How is it looking:
