Angular 2 document.removeEventListener doesn't work in class

Question

I can't remove event when action is end. I init event by click:

<span class="leftTopPoint" (click)="initResize($event)"></span>

export class SectionComponent {
    ...

    initResize(e): void {
        this.mouseX = e.clientX;
        this.mouseY = e.clientY;

        document.addEventListener('mousemove', this.onResize.bind(this), false);
        document.addEventListener('mouseup', this.stopResize.bind(this), false);
    }
}

I used .bind(this) and then pointer this is okay, but when I call to method of stopResize(), removeEventListener doesn't work. Method onResize() still work.

export class SectionComponent { ...
    stopResize(e): void {
        document.removeEventListener('mousemove', this.onResize, false);
        document.removeEventListener('mouseup', this.stopResize, false);
    }
}

Answer 1

Here is an elegant way with little boilerplate by using the fat arrow function:

export class AppComponent {
  private classMember = 'aClassMember';

  // use the fat arrow to bind the event
  private eventListener = () => {
    console.log(this.classMember);
  };

  registerEvent() {
    this.htmlEl.addEventListener('click', this.eventListener);
  );

  unregisterEvent() {
    this.htmlEl.removeEventListener('click', this.eventListener);
  );
}

hints:

• use passive event handler, unless you want to call preventDefaults
• when you want to avoid that the event triggers the Angular change detection use runOutsideAngular()
• full stackblitz example

Answer 2

You have to specify the same function to removeEventListener as you provided to addEventListener. The function returned by bind is not the same as the original function (if it were, it would have the this issue).

So you'll have to store your bound functions and use them when calling removeEventListener.

initResize(e): void {
    this.mouseX = e.clientX;
    this.mouseY = e.clientY;

    if (!this.onResizeBound) {
        this.onResizeBound = this.onResize.bind(this);
    }
    if (!this.stopResizeBound) {
        this.stopResizeBound = this.stopResize.bind(this);
    }

    document.addEventListener('mousemove', this.onResizeBound, false);
    document.addEventListener('mouseup', this.stopResizeBound, false);
}

and

stopResize(e): void {
    document.removeEventListener('mousemove', this.onResizeBound, false);
    document.removeEventListener('mouseup', this.stopResizeBound, false);
}