CODEWITHSUNDEEP
angularangular-ngselect
Tim
Tim

Reputation: 5839

How to clear ng-select selection

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>

Upvotes: 36

Views: 74392

Answers (10)

Mobina Khalilzade
Mobina Khalilzade

Reputation: 57

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();

Upvotes: 0

user3357340
user3357340

Reputation: 1

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.

Upvotes: 0

Sohail Shahzad
Sohail Shahzad

Reputation: 369

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.
}

Upvotes: 2

Andris
Andris

Reputation: 4193

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.

Upvotes: 5

Ashok M A
Ashok M A

Reputation: 528

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.

Upvotes: 15

Robin Webb
Robin Webb

Reputation: 1521

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

Upvotes: 1

Red X
Red X

Reputation: 1

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.

Upvotes: 0

Buczkowski
Buczkowski

Reputation: 2416

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.

Upvotes: 53

Alex Onozor
Alex Onozor

Reputation: 7081

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

Upvotes: 0

Tim
Tim

Reputation: 5839

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.

Upvotes: 6

Related Questions