How to remove EventListeners in angular 4

Question

I need to remove the wheel eventlistener immediately after it fired. I tried the following but its not removing the eventlistener.

export class HomeComponent implements OnInit {

    constructor() {}

    ngOnInit() {
       document.querySelector("#section-one").addEventListener("wheel", () => this.myFunction1(), true);
    }

    myFunction1() {
      alert();
      document.querySelector("#section-one").removeEventListener("wheel", this.myFunction1, true);
      console.log("Done!");
    }
}

Any suggestions?

Answer 1

According to the docs :

Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect.

your code shouldn't work.

Possible fix can be as follows:

wheelHandler: any;

ngOnInit() {
    this.wheelHandler = this.myFunction1.bind(this);
    document.querySelector("#section-one").addEventListener("wheel", this.wheelHandler, true);
}

myFunction1() {
    alert();
    document.querySelector("#section-one").removeEventListener("wheel", this.wheelHandler, true);
    console.log("Done!");
}

where wheelHandler is a function referring to the same instance of handler

For more angular way solution see

• How to listen for mousemove event on Document object in Angular

But AFAIK useCapture parameter is not supported yet. So it's always false

Answer 2

You could use the HostListener decorator to bind a event listener, but this only works for the host element. If you want to add and remove a listener for a child element you have to use the Renderer2.listen method. Which returns a function to remove the event listener.

@Component( {
  template: '<div #sectionOne></div>'
})
export class myComponent {
  private _listeners = [];

  @ViewChild('sectionOne')
  public section: ElementRef<any>;

  constructor(private _renderer: Renderer2) {}

  ngAfterViewInit() {
    this._listeners.push(
      this._renderer.listen(this.section.nativeElement, 'click', this.handler.bind(this))
    );
  }

  ngOnDestroy() {
    this._listeners.forEach(fn => fn());
  }

  public handler() {
  }
}

The useCapture parameter isn't supported by angular by now. For more information, see this issue .

Answer 3

The problem is probably that when you use a class method as a callback function, this no longer points to the class in the callback function.

Use this code instead to add your event listener:

document.querySelector("#section-one")
  .addEventListener("wheel", () => this.myFunction1(), true);

Note that this.myFunction1 has become () => this.myFunction1() . In other words, I wrapped the name of the callback function inside a lambda.

The code to remove the listener stays the same:

document.querySelector("#section-one").removeEventListener("wheel", this. myFunction1, true);

Finally, and most importantly, why are you using event listeners like that? This is definitely NOT the Angular way. 😅