<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>
Templates complain when the object "can be null" and they don't accept using typescript's <code class="notranslate">!</code> not null caster. The way to do this is by using <code class="notranslate">?</code> instead which is inconsistent.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Angular templates should accept <code class="notranslate">!</code> like if it was <code class="notranslate">?</code></p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;h2&gt;{{ video.getSnippet().getTitle() }}&lt;/h2&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>{{ video.getSnippet().getTitle() }}<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">resulted in error  "Object is possibly 'null'."</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- Using typescript's &quot;not null&quot; cast --&gt;
&lt;h2&gt;{{ video.getSnippet()!.getTitle() }}&lt;/h2&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- Using typescript's "not null" cast --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>{{ video.getSnippet()!.getTitle() }}<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">resulted in Error: Template parse errors:<br>
Parser Error: Unexpected token '!' at column 23 in [{{ video.getSnippet()!.getTitle() }}]</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Consistency</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>Ubuntu, Atom</li>
<li><strong>Language:</strong> TypeScript?</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">If we try to put a structural *ngIf attribute directive inside a input element in a form<br>
to make it appear on certain conditions and not on others. And when we try to access the<br>
DOM of the element using #ControlOfTheInput it shows the element is undefined as if the<br>
DOM wasn't created.<br>
<strong>Expected behavior</strong></p>

<p dir="auto">It is expected that if the condition is true the input field should be accessible<br>
<strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://plnkr.co/edit/EhLdqIt931SJB0MsvVVq" rel="nofollow">https://plnkr.co/edit/EhLdqIt931SJB0MsvVVq</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">To be able to conditional change form elements in a form when certain conditions have been fulfilled<br>
<strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<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>

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