<p dir="auto">I'm submitting a feature request</p>
<p dir="auto"><strong>Current behavior</strong><br>
The HostListener decorator is a very useful feature. We use it a lot. Very often the events we subscribe to come from the document.<br>
Very often, when the HostListener fires for document level events, we need to perform additional checks before performing any change to the application. Most times the handler is invoked, nothing happens to the app. Since HostListener marks the component tree as dirty, it leads to heavy re-evaluation of many components, and hurts performance (the tree is on Push but some paths are very long with HostListener near the leafs).</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I would appreciate a way to use the HostListener without triggering a change detection for the sub tree.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
An example use-case is in directives checking for clicks outside a component. They are very common and have few implementations such as  <a href="url">https://github.com/chliebel/angular2-click-outside/blob/master/clickOutside.directive.ts</a> and <a href="url">https://christianliebel.com/2016/05/angular-2-a-simple-click-outside-directive/</a>.<br>
Using these directives leads to heavy evaluation of many components.</p>
<p dir="auto"><strong>Angular version:</strong> 4.0.2</p>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently if one binds lots of event listeners on <code class="notranslate">document</code> or <code class="notranslate">window</code>, i.e. components/directives used via ngFor, application can crawl to a slow</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Binding event listeners should be simple without having to architect around performance concerns</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Warning: If running the preview, run when not afraid of browser crashing (even on the desktop)<br>
<a href="http://plnkr.co/edit/oMMi6tFR3YZMKtMqvSys?p=info" rel="nofollow">http://plnkr.co/edit/oMMi6tFR3YZMKtMqvSys?p=info</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I believe a good opportunity lies here to have Angular optimize handling the event delegation through binding single event listeners on <code class="notranslate">document</code> and <code class="notranslate">window</code> for global events and iterating through event listeners in order to allow for simpler application design around management of global events.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
macOS Sierra 10.12.3</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.0.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> = N/A</p>
</li>
</ul>