How to clear ng-select selection

angular angular-ngselect
Tim picture Tim · Jun 18, 2019 · Viewed 23.2k times · Source

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.

Screenshot of ng-select dropdown, with clear icon circled in red

I was expecting a clear() method or something similar, but the documented API doesn't have anything along those lines.

This is my dropdown code:

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

Answer

Buczkowski picture Buczkowski · Jun 18, 2019

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.

Related questions

disable angular ng-select window

We are using ng-select in a project and I'm facing the problem that I can't disable the ng-select window. Is it possible to disable it with native code or do I need to find some custom solution? <ng-select #changeowner …

Read More
How to set default values in ng-select in angular6?

I am using angular6 multi-select which have a list of items coming in an array of objects from angular service on ngOnInit like this which is passing into multi-select : this.sensorTypes = [ { label : "Power", value : "P"}, { label : "Current", value : "C"}, { label : "…

Read More
angular ng-select and add event

I'm using ng-select and on selected item fire the callback which does some logic. I face the problem, that (add) event does not fire when I choose the item from the list and I use the (change) event instead. But …

Read More