HostListener doesn't work on structural directives (with global events)

[lazarljubenovic]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Placing a host listener on a structural directive doesn't work (no error, nothing).

Expected behavior
We should be able to use HostListener. Or it should throw a meaningful error if it's expected behavior.

Minimal reproduction of the problem

http://plnkr.co/edit/VOmMkLWSEVONy3cKXZJq?p=preview

Please tell us about your environment:

• Angular version: 2.4.4

• Browser: Chrome 54

• Language: TypeScript

[pkozlowski-opensource]

An interesting question to ask: does it make sense to have host properties / listeners on structural directives. Let's re-write it in the de-sugared form:

<template dir>
   <h2>Hello {{name}}</h2>
</template>

What would a host listener on a <template> tag mean? The question gets even more "interesting" if you notice that the <template> tag is not rendered / present in the final DOM.

I've got the impression that this plunk assumes that a structural directive "seats" on the <h2> element while in reality it is on the <template> element.

While it is an interesting corner case it would be good to know what is the real-life use case / what were you trying to do. It is important to understand what it he underlying use-case as host bindings / listeners don't make much sense as things stand today.

[DzmitryShylovich]

We can inject ElementRef into structural directive. HostListener/Binding can use it as a host.

[pkozlowski-opensource]

We can inject ElementRef into structural directive. HostListener/Binding can use it as a host.

Don't think so - the injected ElementRef corresponds to a comment node that serves as an anchor:
http://plnkr.co/edit/XRucLNcM2fz3WbyNnvQN - it is not <h2>.

Once again - it wold be good to focus on a specific, real-life use-case.

[lazarljubenovic]

does it make sense to have host properties / listeners on structural directives

Legit question. To me, it makes sense to listen to global events, such as scrolling, etc. Listening to host events events doesn't make sense, as you described. (Related: #11699)

An example could be a simple directive which shows/hides an element based on scroll position, or window size. Think ngIf triggered by global events.

[danizep]

We have the same problem.
I implemented a directive exactly as described by @lazarljubenovic using a regular addEventListener, but would be great to change it to a HostListener.

[stguitar]

@pkozlowski-opensource OK, I agree with your logic above, however as far as a use case, I may have one, and if there is a better/different way to do this today, im all ears. My use case is the same situation, but more around host bindings, in that i want to have the directive apply CSS on the host for the directive, while modifying the dom a bit.

More info:
I have a directive that is structural, in that i want to wrap the original input control in a div and apply some bonus styling etc. I think this requires a structural directive to do this as far as i understand.

So the directive will wrap an input with a div, which has better visuals than the original input. the original input element is using the formControlName directive and properly binding its data to the formGroup for the containing component. from what i can tell, i need to leave the original input there in the DOM to keep the data binding right, but i want to hide it or move it out of view and have the user interact with the outter div the directive just wrapped the input with.

My solution right now is that I just use normal CSS in my project to have a rule to hide this input control, and the directive doesnt worry about it. it would be nice if the CSS were contained within the directive, and not something we will have to remember to add as needed either globally or per component that has markup using this directive.

I also was able to use the Renderer2.nextSibling() a bit to eventually find the input element in question and then get the formControl and set the styles on it directly but this felt very janky...

As a side note, I see a few solutions to this use case:

• if there was a way to have a structural directive to bind to the NgControl or something (I have read this works but for me, in a shared module it does not seem to work)

• perhaps have the directive be able to implement ControlValueAccessor like components can (this seems logical to me)

• the structural div be able to apply CSS to the host element

[trotyl]

@stguitar How does it relates to HostListener?