DEV Community

Nobody has to use HostListener

Jan-Niklas Wortmann on December 18, 2019

Angular's @hostListener is well known within the community. Rather unknown are the problems this might have on runtime performance and general appl...
Collapse
 
bespunky profile image
Shy Agam

It is probably better to use Renderer2 for listening instead of directly accessing the native element.

Collapse
 
tieppt profile image
Tiep Phan

I think so. Renderer2 have listen method to do that.

Collapse
 
niklas_wortmann profile image
Jan-Niklas Wortmann

Oh thanks a lot for this feedback. I didn't know that before. I'll update the blog post today

Collapse
 
agroupp profile image
Arthur Groupp

Renderer2 listen method doesn't have params that have addEventListener. Actually it's the same as @HostListener.

Collapse
 
reeverser profile image
Reeverser • Edited

Regarding the "The problem here is that we register the 3 event listener, mentioned above, for every component instance, even though it's impossible to drag'n'drop multiple rectangles at the same time." Actually this approach allow us to dag'n'drop multiple elements at once. Managed to do that 4 times on 2 different computers when testing how the code decides which rectangle to pick up when they overlap.

Collapse
 
hansschenker profile image
Hans Schenker

Good example that shows that Angular does not fully embrace RxJs Technology (It even hides it with EventEmitter, Input -> SimpleChanges). Now Angular team even takes into considerations to replace RxJs with Promises (ngconf 2022).
Angular's big merit on Web Platform is that it made Typescript and RxJs known to the Web Community. These two Technologies are so fundamental that they will outlive Angular.

Collapse
 
nombrekeff profile image
Keff • Edited

Nice post! I recently started using fromEvent, cool stuff can be done with it also!

I started using it, for debounced input search, to not perform more requests than needed.

Collapse
 
markgoho profile image
Mark Goho

For observing inputs, you might consider using reactive forms and subscribing to the valueChanges observable on the form or formControl in question.

Collapse
 
nombrekeff profile image
Keff

Ohh true, I did not consider this approach, I didn't like to have to pass in the element reference to fromEvent, I don't usually like manipulating elements directly so the reactive form could be a really nice solution.

Thanks for the info!

Collapse
 
spock123 profile image
Lars Rye Jeppesen • Edited

That won't help with enter key which is often used.

Collapse
 
oleksandr profile image
Oleksandr

Thanks for article!
Btw takeUntil(mouseDown$) will complete the sequence. Should we add repeat() to ressurect it ?

Collapse
 
niklas_wortmann profile image
Jan-Niklas Wortmann

the takeUntil is applied to the inner stream and we don't want this to repeat. It is going to be recreated with the next notification coming from the fromEvent. The indention is propably a little bit missleading

Collapse
 
oleksandr profile image
Oleksandr

Ah, yes! Missed that it is for inner observable, thanks

Collapse
 
lambshift profile image
Juan Pablo de la Torre

You can solve all of these problems using Angular's Event Plugins and still use HostListener. It is the cleaner and clearer way of writing listeners in Angular.

Your RxJS code is broken, btw.