how to use lodash _.debounce in angular

Question

I tried to use the function _.debounce in lodash library in my angular app.

my code:

   onKeyup(event) {
    if (event.length >= 3) {
      this.getCities(event);
    }
  }

  public getCities(namePrefix: any) {

    this.citiesSrv.getCities(namePrefix).toPromise().catch(err => console.log(err)).then(results => {
      this.options = results["data"].map(x => x.name + ", " + x.country);
    }
    ).then(test => {
      this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith(''),
          map(value => this._filter(value))
        );
    })
  }

I want to call getCities in OnKeyup function in delay. What is the right way?

thanks

Answer 1

you need to wrap debounce around getCities and the call it. So inside your component file In code snippet below I have debounce it to 400 ms

debouncedGetCitities = _.debounce(params => this.getCities(params), 400);
...
onKeyup(event) {
    if (event.length >= 3) {
      this.debouncedGetCitities(event);
    }
  }