Angular Instant Search Custom Clear All - clearsQuery Not Working

#1

Hi,

I’ve implemented my own Clear All (because I I want to have the button say “Clear” and not “Clear refinements” - maybe there’s an easier way?).

In NgOnInit I’m setting clearsQuery to true, but when it’s clicked it’s not clearing the query.

Here is my complete implementation. Hopefully I’m missing something.

import { Component, OnInit, OnDestroy, Inject, Input, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectClearRefinements } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-custom-clear-button',
  templateUrl: './custom-clear-button.component.html',
  styleUrls: ['./custom-clear-button.component.scss']
})
export class CustomClearButtonComponent extends BaseWidget implements OnInit {

  state: {
    refine: () => void,
    hasRefinements: boolean,
    createURL: () => string,
    widgetParams: object
  }

  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent) {
      super('CustomClearButton');
    }

  ngOnInit() {
    this.createWidget(connectClearRefinements, {
      clearsQuery: true,
      autoHideContainer: true
    });
    super.ngOnInit();
  }

  public clearAll(e) {
    this.state.refine();
  }
}

Thanks!

Aaron

#2

Hi Aaron, you probably just didn’t connect the clearAll function to your button.
Can you show us your template?

#3 
<button type="button" class="btn btn-danger legitRipple shadow-2" (click)="clearAll($event)" style="margin-top: 3px;">Clear</button>
#4

I should have mentioned that it does correctly clear all of the facets, just not the query.