<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>
I love the transition to one-way data flow in Angular 2+. But there seems to be a gap when it comes to implementing strict one-way data flow with input controls. If I understand correctly, if you want to do one-way data flow with an input, you can just use [ngModel] to pass in the source model value and then handle the change event to update the source model. The only problem with this is that if something goes wrong and that change event doesn't get handled correctly, the view and the model can get out of sync.</p>
<p dir="auto">ReactJS has the concept of a 'controlled input' where there is a guarantee made that the view will always show the current model value. Meaning, if you don't manually update the model in response to a change event or something goes wrong, the view value will not change. It's a nice guarantee.</p>
<p dir="auto">Without this guarantee, I'm a little more hesitant to do one-way data flow with inputs and without the one-way data flow it's hard to do stuff like immutability and you miss out on the simplification that can come from one-way data flow.</p>
<p dir="auto">With things like radio/checkbox inputs, this isn't as big of a deal because it's not too difficult to role your own custom radio/checkbox that only reflects the model value and emits change events. The difficult one is the text input because it would be pretty intense to 'role your own' text input. :)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
It would be nice if there was a directive or official 'best practices' in the documentation for this scenario. I understand that it's not a trivial task to 'guarantee the model and view are always in sync.' (you might have to deal with stuff like cursor jump, etc.) And there might not be a one-size fits all solution but it would nice if there were at least some best practices in the documentation. I've considered a setup where you have a component wrapper directive  around an input and when a change event is fired it would in turn fire it's own change event and then manually kick off a change detection (so would run outside the zone).  Then after that finishes it would check the model value and if it's not the same as the view value, it would revert/update the view value to match the model.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/R91YQ2ddsd0SxOcKzUce?p=preview" rel="nofollow">http://plnkr.co/edit/R91YQ2ddsd0SxOcKzUce?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To allow for immutable state (e.g. Redux) and full one-way data flow when dealing with inputs.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
all</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
all</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong><br>
all</p>
</li>
</ul>
<p dir="auto">Thanks for all the great work!<br>
Andy</p>
<p dir="auto">Hi,</p>
<p dir="auto">I've been following the Tour of Heroes tutorial. I've noticed that the back link to return from the hero detail component to the dashboard or the list of heroes does not work properly on safari.</p>
<p dir="auto">Environment:<br>
Safari 9.1 on Mac OS X 10.11.4</p>
<ol dir="auto">
<li>Go to <a href="https://angular.io/resources/live-examples/toh-5/ts/plnkr.html" rel="nofollow">https://angular.io/resources/live-examples/toh-5/ts/plnkr.html</a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4221155/14768326/79dd1dbe-0a3f-11e6-9fbe-ca021d692090.png"><img src="https://cloud.githubusercontent.com/assets/4221155/14768326/79dd1dbe-0a3f-11e6-9fbe-ca021d692090.png" alt="dashboard-on-init" style="max-width: 100%;"></a></li>
<li>click on one hero on the dashboard =&gt; details appears<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4221155/14768327/7ecdc71a-0a3f-11e6-96a2-3e8ff471e427.png"><img src="https://cloud.githubusercontent.com/assets/4221155/14768327/7ecdc71a-0a3f-11e6-96a2-3e8ff471e427.png" alt="detail" style="max-width: 100%;"></a></li>
<li>click on the back button at the button =&gt; the dashboard is empty !!!<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4221155/14768329/81e9991a-0a3f-11e6-9136-9476b63a00a7.png"><img src="https://cloud.githubusercontent.com/assets/4221155/14768329/81e9991a-0a3f-11e6-9136-9476b63a00a7.png" alt="dashboard-after-back" style="max-width: 100%;"></a></li>
</ol>
<p dir="auto">I tested it on Firefox 45.0.1 and it works ok: in step 3 the dashboard is correctly populated.</p>
<p dir="auto">thanks.</p>
<p dir="auto">Brieuc</p>