<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
In rc4, you could use the safe navigation/Elvis operator (?.) to guard against nulls in property paths when using the async pipe - don't seem to be able to in rc5.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Inside a template in rc5 - Assuming Observable var data which (will have) an id property:

{{(data | async)?.id}} // throws error : TypeError: Cannot read property 'id' of null"><pre class="notranslate"><code class="notranslate">// Inside a template in rc5 - Assuming Observable var data which (will have) an id property:

{{(data | async)?.id}} // throws error : TypeError: Cannot read property 'id' of null
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
As per rc4:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" {{(data | async)?.id}} // works as expected - id displays when data loaded"><pre class="notranslate"><code class="notranslate"> {{(data | async)?.id}} // works as expected - id displays when data loaded
</code></pre></div>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
rc4 - working as expected:<br>
<a href="http://plnkr.co/edit/m9UJEwB4ZSNhIb77A2aI?p=preview" rel="nofollow">http://plnkr.co/edit/m9UJEwB4ZSNhIb77A2aI?p=preview</a></p>
<p dir="auto">rc5 - not working/throwing error:<br>
<a href="http://plnkr.co/edit/QQlg8nKJqVR8DqB2SiTw?p=preview" rel="nofollow">http://plnkr.co/edit/QQlg8nKJqVR8DqB2SiTw?p=preview</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Accessing properties of (currently) null values not to throw an error - the Elvis operator would ideally guard against the error...</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all]</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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Cannot apply a pipe to the display value of an input field.</p>
<p dir="auto"><strong>Desired behavior</strong><br>
I'd like to be able to apply a pipe to the display value of an input. Suppose I have a pipe which converts a whole number of cents into dollars and adds a dollar sign, e.g., "110" =&gt; "$1.10". As a user is typing, I'd like to apply the pipe to the displayed value while the value of the input field remains 110, i.e., only apply the pipe to the display of the field's value.</p>
<p dir="auto">Here's a Plnkr which shows the input field and the value of the input run through the pipe. I'd like the actual displayed value in the input field to look like content below the input field.</p>
<p dir="auto"><a href="http://plnkr.co/edit/NgNoxQ2GTUYKmEYjnYAh?p=preview" rel="nofollow">http://plnkr.co/edit/NgNoxQ2GTUYKmEYjnYAh?p=preview</a></p>
<p dir="auto">And here's my SO question about this feature, demonstrated in Angular Material:</p>
<p dir="auto"><a href="http://stackoverflow.com/questions/40855106/transform-md-input-value-via-pipe" rel="nofollow">http://stackoverflow.com/questions/40855106/transform-md-input-value-via-pipe</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
This specific scenario is a common use-case in finance-related applications but the scenario is general, date formats, etc.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<p dir="auto">OpenSUSE 13.2 Linux, Emacs, ... N/A</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.x</p>
</li>
<li>
<p dir="auto"><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 ]<br>
All</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
All</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>