<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>
ngc produces not validated (un-typed) context within embedded template directives like *ngIf, *ngFor, etc.</p>
<ol dir="auto">
<li>Validated context (produces error when running ngc - expected behavior):</li>
</ol>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-app',
  template: '&lt;h1&gt;{{errorProperty}}&lt;/h1&gt;'
})
export class AppComponent { }"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;h1&gt;{{errorProperty}}&lt;/h1&gt;'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<ol start="2" dir="auto">
<li>Not validated context (does not produce error when running ngc - unexpected behavior):</li>
</ol>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-app',
  template: '&lt;div *ngIf=&quot;false&quot;&gt;{{errorProperty}}&lt;/div&gt;'
})
export class AppComponent { }"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;div *ngIf="false"&gt;{{errorProperty}}&lt;/div&gt;'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
ngc produces error in the second example above.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Run ngc with above examples 1 and 2.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Detects errors in complex templates during compile time.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> N/A</p>
</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0.10 | ES6]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   5.3.0</p>
</li>
</ul>
<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="[X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] 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">[X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] 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></p>

<p dir="auto">When implementing a directive that listens to  <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostListener/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostListener">@HostListener</a>('click', ['$event'])  and event.cancelBubble = true and a (click) is set to the same element as the directive the (click) does not respect the event.cancelBubble but still processes even though the event is first fired in the directive.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Event should be canceled and not fired in the (click) event.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<ol dir="auto">
<li>Create a directive</li>
<li>Implement<br>
<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostListener/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostListener">@HostListener</a>('click', ['$event'])<br>
private onClick(event:MouseEvent):void<br>
{<br>
console.log("here 1");<br>
event.cancelBubble = true;<br>
}</li>
<li>Add directive to component</li>
<li>Add (click)="console.log('here 2')"</li>
<li>Output:<br>
here 1<br>
here 2</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">You want to stop the standard behavior on for example a long click.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10, Visual Studio Code, Angular CLI</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">2.4.0</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<p dir="auto">Chrome</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.X</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</li>
</ul>