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.

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>

score 47 · Accepted Answer · answered Jun 18 '19 at 10:37

47

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.

answered Jun 18 '19 at 10:37

Buczkowski

2,296
12
18

1

This causes focus on selected input. – Andris Jan 08 '20 at 13:23
8

`this.ngSelectComponent.clearModel();`, this works for me. – Buddhika Gayashan May 07 '20 at 14:23
I have multiple instance of ng-select. How to detect and clear a particular one ? – GSangram Aug 20 '20 at 14:27
3

@GSangram then you should use `@ViewChildren` and find your particular one. – Buczkowski Aug 21 '20 at 06:57

score 12 · Answer 2 · answered Nov 19 '19 at 03:27

I was looking for the same but for templates to invoke it outside ng-select. So, the below worked fine for me following the accepted answer. ^_^

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

<input type="button" (click)="selectDropdown.handleClearClick()">

This also makes sure the resetCalculations() being called.

This code is incomplete. It doesn't show what `resetCalculations();` contains. Which is the essential part... — Oushima, Oct 16 '22 at 15:31

score 6 · Answer 3 · answered Jun 18 '19 at 09:54

6

Clearing the selection can be achieved by simply setting the ngModel value to null. In the case of the above example:

this.selectedCalculation = null;

This isn't exactly the same as clicking the clear icon, as it doesn't trigger the (clear) output event, but it was sufficient for my needs.

answered Jun 18 '19 at 09:54

Tim

5,435
7
42
62

1

Ultimately you can get **ng-select** through `@ViewChild` and call `handleClearClick` but it isn't good way since it wasn't exposed in public api methods. – Buczkowski Jun 18 '19 at 10:07
@Buczkowski I would prefer your approach. The method isnt marked as private or anything Consider to add it as an answer – Jota.Toledo Jun 18 '19 at 10:28
I am not sure, using this approach actually will not triggered ng-select (change) event – Mohsin khan Dec 06 '19 at 03:50

score 3 · Answer 4 · answered Jan 08 '20 at 13:36

Even thought @Buczkowski answer clears ng-select, it also does a focus on input, which isn't needed for all cases. So i used other method: clearModel

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

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

So if you need to just clear input, use clearModel method. Else if focus and clear is needed, use handleClearClick.

score 2 · Answer 5 · edited Jan 25 '21 at 09:40

The best answer is for clearing an input field on a specific action. I also use this code in my project according to my requirement.

In HTML write this code:

<ng-select [items]="products" #ngSelectComponent
           bindLabel="name"
           placeholder="Enter Product Name /SKU/ Scan Barcode"
           appendTo="body"
           name="selectedProduct"
           id="selectedProduct"
           (change)="productChange($event)"
           [multiple]="false"
           ([ngModel])="selectedProduct" >

<input type="button" (click)="clearValue()">

In .TS file add a ViewChild for this control so that if your screen consists of multiple ngSelect elements then you can clear a specific ngSelect value.

@ViewChild('ngSelectComponent') ngSelectComponent: NgSelectComponent;

clearValue(){
  this.ngSelectComponent.clearModel(); 
  // This line will clear the value of ngSelect control. 
  // You can write code according to your requirement.
}

I want to clear ngSelect after scan barcod from product – Sohail Shahzad Jan 23 '21 at 19:25 — Sohail Shahzad, Jan 23 '21 at 19:25

score 1 · Answer 6 · answered Nov 11 '19 at 13:26

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 = [];
  }

score 0 · Answer 7 · answered Jun 18 '19 at 10:01

0

Like @tim answer is correct but I will prefer you set as an empty array instead of null just to save any loop break.

this.selectedCalculation = [];

answered Jun 18 '19 at 10:01

Alex Onozor

6,841
1
22
26

Not sure if I've misunderstood what you mean, but in this scenario `selectedCalculation` isn't an array, it's the string value (so in the screenshot `selectedCalculation` would equal `'abc'`). – Tim Jun 18 '19 at 14:19

score 0 · Answer 8 · answered Nov 11 '19 at 08:29

Agree with @tim and @AlexOnozor, I have successfully used 'selectedCalculation' as 'string', 'string[]', 'object[]' with Reactive Forms ( and as 'string' with ngModel ) and your suggested method worked smoothly. I also tried using 'handleClearClick' but failed. Will update if i find my way through it.

So, this.selectedCalculation = '' or this.selectedCalculation= [] (for multipleSelect = true) should work.

score 0 · Answer 9 · answered May 19 '21 at 14:16

I had the same issue and realised that the only thing that you need to do is to set your calculationOptions that you assign [items] to be an empty array i.e [] in your .ts file.

Now, its seems like you are asking someone set your calculationOptions to []. Its make sense why the clear() functionality does not exist.

score 0 · Answer 10 · answered May 01 '23 at 10:10

This worked for me

HTML

  <nz-select
        nzPlaceHolder="Select an Address"
        formControlName="addressId"
        #NzSelectAddress
      >
        <nz-option
          *ngFor="let address of addresses"
          [nzValue]="address.id"
          [nzLabel]="address.city"
        ></nz-option>
      </nz-select>

TS

@ViewChild('NzSelectAddress') NzSelectAddress: NzSelectComponent;
this.NzSelectAddress.onClearSelection();

How to clear ng-select selection

10 Answers10

Linked

Related