angularangular8angular-ngselect

Clear value and dropdown of ng-select after select the value


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}} &nbsp;&nbsp; <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.


Solution

  • In your HTML:

    [items]="customers | async"
    

    This is where the different options are, emptying it should clear the dropdown.