Already I have keyup function in Angular 6 Project, Now I want to apply this function into debounce time. So how can I do that?

Question

Already I have keyup function in Angular 6 Project, Now I want to apply this function into debounce time. So how can I do that ?

I am trying to apply debounce time on keyup function. I want to use this keyup function directly in Rxjs debounce time.

Answer 1

If you want to apply rxjs to your event, its easier to just trigger a subject in your event handler, and go from there. In the stackblitz sample listed below, you will see that i trigger a subject right from the template:

<button (click)="myEvent$.next($event)">click me</button>

then you have your entrypoint to pipe any rxjs operators you like ...

this.myEventOutcome$ = this.myEvent$.pipe(
  debounceTime(500),
  map((evt) => {
    this.clickCounter++;
    return { evt, clickCounter: this.clickCounter };
  })
);

https://stackblitz.com/edit/angular-ivy-g8mqor?file=src/app/app.component.ts