How to clear ng-select selection

Question

Is it possible to programmatically clear the selection of an ng-select dropdown? I\'m wanting the equivalent behaviour of clicking the clear icon, but triggered programmatically

Answer 1

Assuming the originally posted code sample below.

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           #calculationValue="ngModel"
           [(ngModel)]="selectedCalculation">
</ng-select>

The selectedCalculation variable is created as an array and not a string, as the ng-select can allow for multiple values to be selected if [multiple]="true" is set.

To clear the selected value(s) in the array programmatically, use:

this.selectedCalculation = [];

Should you need to clear the bound items, use:

this.calculationOptions = [];

Both of the above can be done by adding the (change) handler in HTML.

(change)="change($event)

Something like this in your TypeScript.

change(event: any): void {
   this.calculationOptions = [];
   this.selectedCalculation = [];
  }

Answer 2

Here is solution from comment:

  // Access ng-select
  @ViewChild(NgSelectComponent) ngSelectComponent: NgSelectComponent;

  // Call to clear
  this.ngSelectComponent.handleClearClick();

Note that handleClearClick isn't exposed in docs as public api method however as Tim mentioned it's public method so it's possible to call it.