I am working on an angular 8 project which contains ng-select dropdown. It is a combination of typehead and ng-select. So that I can fetch the data from the api in real time. The dropdown is working fine. But I am unable to find a functionality.
I need to make the selection and the pre-filled dropdown get cleared after I make the selection.
I am able to clear the selection. But I have no idea on how to clear the dropdown which is already filled with the previous search data.
I am using this.selectedCustomer = null; to clear the selection.
and I tried the answer given in this question and it also giving the same result.
I tried it like
@ViewChild(
'customerSearch', {
static: true,
read: NgSelectComponent
}
) customerSearch: NgSelectComponent;
and
this.customerSearch.handleClearClick();
This is doing the same purpose of this.selectedCustomer = null
My html is
<form [formGroup]="heroForm">
<ng-select
[items]="customers | async"
bindLabel="name"
[addTag]="addNewPersonRef"
addTagText="Add new person"
[hideSelected]="false"
[trackByFn]="trackByFn"
[loading]="customerLoading"
[typeahead]="searchInput"
[(ngModel)]="selectedCustomer"
[ngModelOptions]="{standalone: true}"
(ngModelChange)="openCustomerWindow($event)">
<ng-template ng-option-tmp let-item="item" let-search="searchTerm">
<div [ngOptionHighlight]="search">{{item.name}}</div>
<small><i class="fas fa-folder" title="File No"></i> {{item.fileId}} <i class="fas fa-id-card" title="Qatar ID"></i> {{item.qid}}</small>
</ng-template>
</ng-select>
</form>
Is there any option to clear the already filled dropdown programatically? Any help could be appreciated. Thank you.
