New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove @Hostlistener() #16366

Closed
Smiranin opened this Issue Apr 27, 2017 · 4 comments

Comments

Projects
None yet
4 participants
@Smiranin

Smiranin commented Apr 27, 2017

How can I removed @HostListener() in Angular 2, like used removeEventListener in Native JS?

Example:
I have many dropDown components in my page. When dropDown opened I want to add handler on document click event and to remove handler when dropDown closed.

Native JS:

function handler(){
  //do something
}
document.addEventListener('click', handler); // add handler
document.removeEventListener('click', handler); // remove handler

Angular 2:

  @HostListener('document: click') onDocumentClick () {
    // do something
  }

  // How can I remove handler?
@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Apr 27, 2017

Contributor

There is no way to remove a @HostListener.

Also it is probably not a good idea to have a @HostListener if you have many dropdown as you will have as many listeners as you have dropdowns.

Contributor

vicb commented Apr 27, 2017

There is no way to remove a @HostListener.

Also it is probably not a good idea to have a @HostListener if you have many dropdown as you will have as many listeners as you have dropdowns.

@vicb vicb closed this Apr 27, 2017

@ericmartinezr

This comment has been minimized.

Show comment
Hide comment
@ericmartinezr

ericmartinezr Apr 27, 2017

Contributor

Follow this discussion #7626

Contributor

ericmartinezr commented Apr 27, 2017

Follow this discussion #7626

@Smiranin

This comment has been minimized.

Show comment
Hide comment
@Smiranin

Smiranin Apr 27, 2017

@vicb @ericmartinezr I think, as an alternative, to use Rx.Observable.fromEvent(document, 'click') in someService and dropDown will subscribe and unsubscribe to it.

Smiranin commented Apr 27, 2017

@vicb @ericmartinezr I think, as an alternative, to use Rx.Observable.fromEvent(document, 'click') in someService and dropDown will subscribe and unsubscribe to it.

@avbentem

This comment has been minimized.

Show comment
Hide comment
@avbentem

avbentem Apr 26, 2018

Just for future reference: using Rx.Observable.fromEvent(...) also keeps Angular from running change detection in the parent components, which would happen for, e.g., @HostListener('window:keydown')

avbentem commented Apr 26, 2018

Just for future reference: using Rx.Observable.fromEvent(...) also keeps Angular from running change detection in the parent components, which would happen for, e.g., @HostListener('window:keydown')

@crhistianramirez crhistianramirez referenced this issue Aug 15, 2018

Merged

Fix: #129 image zoom off on mobile #139

1 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment