Angular - Add debounce to an event

Issue

I am using mouseenter and mouseleave events to handle sidenav opening and closing in my app. I would like to add a bit of debounce to these events, because right now if you hover the container with these events fast, these events are being called a lot of times and I'm getting weird behavior with my sidenav. How can I add debounce to these events ? Is it event possible ?

Solution

Add a template reference variable on your button :

<button #button>Click me</button>

Reference it inside your component using @ViewChild

@ViewChild('button') button: ElementRef;

Use fromEvent from rxjs to listen to the click event and use the debounceTime operator :

ngAfterViewInit() {
    fromEvent(this.button.nativeElement, 'click').pipe(
      debounceTime(2000) // 2 seconds
    ).subscribe(() => {
      // do whatever
    });
  }

Answered By - Gérôme Grignon