WIP(compiler): fix #19878, can config zone/once/passive/capture in template/HostListener decorator

[JiaLiPassion]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #19878

can't pass passive, capture, once parameters to addEventListener.

not easy to config use ngzone or nozone with HostListener

user need to explicitly call runOutsideOfAngular to make sure eventhandler run outsideofngZone

@HostListener('window:resize', ['$event.target'])
  onResize(target: any) {
    this.ngZone.runOutsideOfAngular(() => {
       console.log('resize triggered');
    });
  }

or call ngZone.run explicitly make sure eventhandler run into ngZone.

@HostListener('window:resize', ['$event.target'])
  onResize(target: any) {
    this.ngZone.run(() => {
       console.log('resize triggered');
    });
  }

not easy to run event handler outsideOfAngular in template

<div (mouseover)="mouseover();"></div>

mouseover() {
  this.ngZone.runOfAngular(() => {
    ...
  });
}

What is the new behavior?

Can config which zone will event handler will run into in @HostListener decorator.

can config passive, capture, once parameters to addEventListener.

• in template, can config those parameter like below.

<div (mouseover.capture.once.passive)="mouseover();"></div>

can config ngzone which will guarantee eventhandler run in ngZone even the handler was

added not in ngZone.

 @HostListener('window:resize.ngzone', ['$event.target'])
  onResize(target: any) {
    console.log('resize triggered');
  }

• can config nozone which will guarantee eventhandler run outside of ngZone even the handler was added in ngZone. and if config outsideOfAngular, DOMEventManager will bypass zone.js and directly use native addEventListener to improve performance.

And it can also work with #20672 to get better performance.

 @HostListener('window:resize.nozone', ['$event.target'])
  onResize(target: any) {
    console.log('resize triggered');
  }

Does this PR introduce a breaking change?

[] Yes
[x] No

Other information

[devoto13]

@JiaLiPassion I use custom EventManager implementation in my project to tackle same problem. The idea is pretty similar to what is done here. But weakly typed. I would be very interested to have a built-in way to control zone for an event subscription.

[JiaLiPassion]

@devoto13, thank you for the information. It is the same idea, and built-in one is faster than runOutsideOfAngular because it will bypass zone totally.

[ericmartinezr]

Wouldn't be a "true" or "false" be simpler? true for running inside angular's zone (on by default), and false for running outside angular's zone.

[JiaLiPassion]

@ericmartinezr , yeah, true/false will be more clearer when we only need in ngZone or not.

I use string becasue there are other options, for example, the default, in fact, current @HostListener behavior is not in ngZone, it is default, that means, the event handler will run in the zone where it is created.

[JiaLiPassion]

I just saw the discussion here, #11200.
About

• event (such as `<button (click)="onClick($event)">)
• @HostListener

There are lot of options need to be extended in the future.

• capture
• passive
• zone
• ...

I am not sure which design is better.
I saw two designs have been discussed here.

1. add a object options. just like the design here, [feat] Take advantage of passive event listeners #8866 (comment)

<button (click: {passive: true})="onClick($event)"></button>

2. use a magic prefix. About the design here by @DzmitryShylovich UseCapture:true event handlers #11200 (comment)

~click => capture: true
-scroll=> passive: true
#scroll=> zone: ngzone
$scroll=> zone: nozone

I prefer the second one, the first one need user to write more code and will need to modify more codes of core/complier, the second one is more friendly.

@mhevery , please review, and I will try to modify this PR with the second one first to see is there any risk, thank you.

[mhevery]

http://test/OCL:183446602:BASE:183446652:1517006128574:ee8ce8f8

[mhevery]

/cc @IgorMinar It would be great if you add your opinion.

@JiaLiPassion

1. Your current PR is nice but it only solves it for @HostListener Using a prefix would solve it globally. I would much rather have a solution which would be global (for all kinds of listeners).
2. I like the idea of encoding it into the string but the suggestion you have is that it does not differentiate between DOM events and component events. (For example if you have a component which has open output than capture, passive are meaningless.)
3. We already have keydown.control.shift.enter listeners see https://github.com/angular/angular/blob/master/modules/playground/e2e_test/key_events/key_events_spec.ts and this feature is for DOM events only. Could we take this approach and extend it?

What I have in mind is something like this.

<div (click)="..."
     (click.nozone.passize.capture)="...">

I am open for suggestions as how to make it better... What do you think.

[IgorMinar]

I just skimmed through and I'm not sure yet if we want to do this at all, but if we do go forward, we should change the api to use an object literal config object rather than string literal. This would allow us to also support passive listeners (see #8866) and other options.

[IgorMinar]

I'll review this in more detail next week, just wanted to provide quick feedback on the API.

[mhevery]

@IgorMinar I agree that current implementation is not what we want, but what about my proposal as described in the comment #21681 (comment)

[JiaLiPassion]

@mhevery , @IgorMinar , thank you for the review.

We already have keydown.control.shift.enter listeners see https://github.com/angular/angular/blob/master/modules/playground/e2e_test/key_events/key_events_spec.ts and this feature is for DOM events only. Could we take this approach and extend it?
What I have in mind is something like this.

I am open for suggestions as how to make it better... What do you think.

Yes, you are right, I forget we already have the syntax like keydown.control.shift.enter, I agree

<div (click)="..."
    (click.nozone.passive.capture)="...">

is a better and consistent solution.

[JiaLiPassion]

@mhevery , @IgorMinar , I have updated this PR, it is still WIP, please review it is ok or not, I will continue to add test cases and document. Thank you!

basically the options below can be configured.

• EventListenerOptions
  • capture
  • passive
  • once
• Zone Options
  • ngzone
  • nozone

And those options can be configured in

• template

<div (mouseover.capture.once.passive)="mouseover();"></div>

• HostListeners

 @HostListener('window:resize.nozone', ['$event.target'])
  onResize(target: any) {
    console.log('resize triggered');
  }

The order of capture/once/passive/nozone/ngzone is not relevant.
And it can also work with existing event syntax like keypress.ctrl.nozone.capture.

The current PR will have to wait for a PR of zone.js angular/zone.js#1053,
because IE not support addEventListener(eventName, listener, options) with the 3rd parameter to be an option object. in zone.js PR, I fix this issue for IE.

[ngbot]

Hi @JiaLiPassion! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[okhobb]

@JiaLiPassion Is it the case that it's assumed passive is false unless included in the list? Per https://bugs.webkit.org/show_bug.cgi?id=182521#c3 (causing issues like mapbox/mapbox-gl-js#6095 -- not an Angular project but illustrates why some apps are broken) it is now the case that it defaults to true on window and document events. Thus, users may explicitly need to configure it to be false in some cases.

[JiaLiPassion]

@okhobb , thank you for the information, I will check it the situation when event such as touchstart is passive:true by default.

[CollinGraf314]

This is something I would really like to be able to use. Is there any news on whether or not .nozone, .ngzone, and the like will implemented?

[ahnpnl]

Hi,

Any new updates on this ? This feature is very nice and useful for developers.

[JiaLiPassion]

Close this one and open a new PR #38236

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}