Angular Renderer2 remove listener

Question

Is it possible to remove listeners with the new angular 4 renderer?

here is the interface:

abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void;

In the renderer v1 listen and listenGlobal returns a Function, but this one returns void.

Is it an issue? If not, how can I remove a listener?

`but this one returns void.` This one returns function that returns `void`. — yurzui, Jun 09 '17 at 09:36
I just made the exact same mistake :-) I guess that compact typescript syntax can sometimes be easy to miss when you're working late.. — andersand, Jul 16 '18 at 16:53

score 76 · Accepted Answer · edited Jun 05 '23 at 13:01

76

There is no difference with Renderer:

import { Renderer2 } from '@angular/core';

export class MyComponent {
  listenerFn = () => {};

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    this.listenerFn = this.renderer.listen(document, 'mousemove', () => console.log('move'));
  }

  ngOnDestroy() {
    this.listenerFn();
  }
}

edited Jun 05 '23 at 13:01

Aqeel Ashiq

1,988
5
24
57

answered Jun 09 '17 at 09:43

yurzui

205,937
32
433
399

Do we really need to do this or would this be handled by Angular? – Suyash Gupta Jun 22 '22 at 15:46
@SuyashGupta We need to do this manually. Else it will keep on adding new listeners, along with the existing ones, every time we reinitialize the component. – Deepesh Kumar Sep 25 '22 at 13:49
can we do like this: `listenerFn = () => {};` to avoid the `null check` in `ngOnDestroy();` – Aqeel Ashiq Jun 01 '23 at 18:38
@AqeelAshiq yep – yurzui Jun 02 '23 at 05:40

score 1 · Answer 2 · answered Feb 19 '20 at 09:27

You could also use the fromEventPattern function from rxjs.

  private createOnClickObservable(renderer: Renderer2) {
    let removeClickEventListener: () => void;
    const createClickEventListener = (
      handler: (e: Event) => boolean | void
    ) => {
      removeClickEventListener = renderer.listen("document", "click", handler);
    };

    this.onClick$ = fromEventPattern<Event>(createClickEventListener, () =>
      removeClickEventListener()
    ).pipe(takeUntil(this._destroy$));
  }

just use/subscribe to it as expected

   myMouseService.onClick$.subscribe((e: Event) => {
      console.log("CLICK", e);
    });

and dont worry about destroying, it will be handled by rxjs during closing the observable!

live-demo: https://stackblitz.com/edit/angular-so4?file=src%2Fapp%2Fmy-mouse.service.ts

see another answer, to explore more details: Is it possible to use HostListener in a Service? Or how to use DOM events in an Angular service?

score 0 · Answer 3 · answered May 12 '20 at 20:35

It’s easier to put the result of the Renderer.listen handler in a variable:

listener: any;

this.listener = this.renderer.listen('body', 'mousemove', (event) => {
  console.log(event);
});

and when the cancel event occurs, call the variable with empty parameters

this.renderer.listen('body', 'mouseup', (event) => {
  this.listener();
});

Angular Renderer2 remove listener

3 Answers3

Linked