Unsubscribing EventListener during ngOnDestroy

Question

Unsubscribing EventListener during ngOnDestroy

Here is my implementation of a directive in Angular. I am facing an issue with removing the event listener in this case:

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{
    constructor(el: ElementRef) {
        let enter = function(event){
            if(event.keyCode === 13){
                el.nativeElement.click();
            }
        }
        document.addEventListener('keyup', enter , false);
    }

    ngOnDestroy(){
        //How can I remove the event listener properly here?
    }
}

I understand that using a global variable to access 'enter' function would solve the issue, but I prefer not storing the state of instance in a global variable.

angular typescript

Answer 1

Answer №1

One approach would be to utilize the @HostListener decorator in this scenario:

@Directive({
  selector: "[Enter]"
})
export class Enter {
  @HostListener('document:keyup', ['$event'])
  enter(event) {
    if (event.keyCode !== 13) return;
    this.el.nativeElement.click();
  }
  constructor(private el: ElementRef) { }
}

It's worth noting that the handler will be automatically removed in the ngOnDestroy lifecycle hook.

If you're interested in exploring alternative solutions, you can refer to:

How to listen for mousemove event on Document object in Angular

Answer 2

One approach would be to utilize the @HostListener decorator in this scenario:

@Directive({
  selector: "[Enter]"
})
export class Enter {
  @HostListener('document:keyup', ['$event'])
  enter(event) {
    if (event.keyCode !== 13) return;
    this.el.nativeElement.click();
  }
  constructor(private el: ElementRef) { }
}

It's worth noting that the handler will be automatically removed in the ngOnDestroy lifecycle hook.

If you're interested in exploring alternative solutions, you can refer to:

How to listen for mousemove event on Document object in Angular

Answer 3

Answer №2

Here is a potential solution:

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{
    private enterKeyHandler;
    constructor(el: ElementRef) {
        this.enterKeyHandler = function(event){
            if(event.keyCode === 13){
                el.nativeElement.click();
                console.log("Enter key triggered");
            }
        }
        document.addEventListener('keyup', this.enterKeyHandler , false);
        console.log("Event listener added");
    }

    ngOnDestroy(){
        document.removeEventListener('keyup', this.enterKeyHandler, false);
        console.log("Event listener removed"); 
    }
}

I hope this resolves your issue.

Best regards, SZ

Answer 4

Here is a potential solution:

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{
    private enterKeyHandler;
    constructor(el: ElementRef) {
        this.enterKeyHandler = function(event){
            if(event.keyCode === 13){
                el.nativeElement.click();
                console.log("Enter key triggered");
            }
        }
        document.addEventListener('keyup', this.enterKeyHandler , false);
        console.log("Event listener added");
    }

    ngOnDestroy(){
        document.removeEventListener('keyup', this.enterKeyHandler, false);
        console.log("Event listener removed"); 
    }
}

I hope this resolves your issue.

Best regards, SZ

Answer 5

Answer №3

Transform it in this way:

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{

    private enterKeyHandler: (event: KeyboardEvent) => void;

    constructor(el: ElementRef) {
        this.enterKeyHandler = (event) => {
            if(event.keyCode === 13){
                el.nativeElement.click();
            }
        }

        document.addEventListener('keyup',  this.enterKeyHandler , false);
    }

    ngOnDestroy(){
        document.removeEventListener('keyup', this.enterKeyHandler, false);
    }
}

Answer 6

Transform it in this way:

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{

    private enterKeyHandler: (event: KeyboardEvent) => void;

    constructor(el: ElementRef) {
        this.enterKeyHandler = (event) => {
            if(event.keyCode === 13){
                el.nativeElement.click();
            }
        }

        document.addEventListener('keyup',  this.enterKeyHandler , false);
    }

    ngOnDestroy(){
        document.removeEventListener('keyup', this.enterKeyHandler, false);
    }
}

Answer 7

Answer №4

Currently, the recommended approach in Angular is to utilize a Renderer2 dependency for handling DOM manipulation in order to abstract away the specifics when working on non-browser platforms (such as native apps or server-side rendering).

For more information, refer to this StackOverflow answer.

Answer 8

Currently, the recommended approach in Angular is to utilize a Renderer2 dependency for handling DOM manipulation in order to abstract away the specifics when working on non-browser platforms (such as native apps or server-side rendering).

For more information, refer to this StackOverflow answer.

Answer 9

Answer №5

Check out the LIVE DEMO here: https://plnkr.co/edit/ZYnlruYQ2HwrQpHZqV9O?p=preview

IMPORTANT: This DEMO utilizes the blur event instead of ngDestroy, both serving a similar purpose. When typing in the textbox, it will detect the keyup event; however, when exiting the input field, the blur event is triggered, preventing any more keyup events.

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
   selector: "[Enter]"
})
export class Enter implements OnDestroy{
    constructor(el: ElementRef) {
      var button=el.nativeElement;
      button.addEventListener('keyup',this.error)
    }

    error(event){
      console.log(event);
        //whatever needs to be done
      if(event.keyCode === 13){
          el.nativeElement.click();
      }
    }

    ngOnDestroy(){
        button.removeEventListener('keyup',this.error); 
    }    
}

Answer 10

Check out the LIVE DEMO here: https://plnkr.co/edit/ZYnlruYQ2HwrQpHZqV9O?p=preview

IMPORTANT: This DEMO utilizes the blur event instead of ngDestroy, both serving a similar purpose. When typing in the textbox, it will detect the keyup event; however, when exiting the input field, the blur event is triggered, preventing any more keyup events.

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
   selector: "[Enter]"
})
export class Enter implements OnDestroy{
    constructor(el: ElementRef) {
      var button=el.nativeElement;
      button.addEventListener('keyup',this.error)
    }

    error(event){
      console.log(event);
        //whatever needs to be done
      if(event.keyCode === 13){
          el.nativeElement.click();
      }
    }

    ngOnDestroy(){
        button.removeEventListener('keyup',this.error); 
    }    
}

Unsubscribing EventListener during ngOnDestroy

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Calculating the sum of values in a JSON array using a specific parameter in Typescript

There seems to be an issue with the functionality of Angular Material on iOS devices

Implementing a wrapped object check using a union type

Attempting to execute the command "ionic serve" results in the display of various error messages

Why does TypeScript assign parameters in the opposite direction when assigning callbacks?

How can I resolve the infinite loop issue caused by Angular Auth guard when using routing?

Setting up only two input fields side by side in an Angular Form

What is the best way to make mouse and touch events trigger responses in Angular versions 9 and above?

What is the best way for the frontend to access the information of the user currently logged in?

Two appearances of the record indicate that it has been updated

Limiting the use of the Tab key within a modal dialog box

Error TS2304: Unable to locate identifier 'RTCErrorEvent'

The FlatList glides effortlessly in any direction

Dropdown with grouped options in Angular PrimeNG - displaying data other than the default label/value pair

Challenges Encountered with Server Operations in Next.js v14 - Issue with Cookie Modification

When trying to run a unit test for my AppModule, I encountered an error indicating that AngularFireModule was

"Following successful POST login and session storage in MongoDB, the session is unable to be accessed due

TS2392 error: Implementing multiple constructors in Angular 2 is not permitted

The Angular component exported from one module cannot be utilized in a different module

Executing POST calls to a Google Apps Script