<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>
A change of value of a date input control (that is created using ngFor and that is bound to an item in an array) modifies the value of the succeeding control.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
A modification of date input control value should only be applied to the selected date input control.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/5ZdUsGolUk5AAYgJ9qgP?p=preview" rel="nofollow">http://plnkr.co/edit/5ZdUsGolUk5AAYgJ9qgP?p=preview</a></p>
<ul dir="auto">
<li>Steps to reproduce -<br>
(Chrome)</li>
</ul>
<ol dir="auto">
<li>Use plnkr link, and wait for the app to load.</li>
<li>Click on the up button next to the first date input control to modify it.</li>
<li>Notice that both first and second date input control values have changed. Also notice that the focus has changed to the second date input control.</li>
<li>Click once again on the up button next to the first date input control.</li>
<li>Notice that this time only first date input control value has changed.</li>
</ol>
<p dir="auto">(Firefox)</p>
<ol dir="auto">
<li>Use plnkr link, and wait for the app to load.</li>
<li>Click the first date input control to set focus, and press Backspace key.</li>
<li>Notice that both first and second date input control value have changed. Also notice that the focus has changed to the second date input control.</li>
<li>Click once again on the first date input control to set focus,  and press Backspace key.</li>
<li>Notice that this time only first date input control value has changed.</li>
</ol>
<p dir="auto">(Edge)</p>
<ol dir="auto">
<li>Use plnkr link, and wait for the app to load.</li>
<li>Click the first date input control to select new date value, and press check-mark button to apply.</li>
<li>Notice that both first and second date input control value have changed.</li>
<li>Click once again on the first date input control to select new date value, and press check-mark button to apply.</li>
<li>Notice that this time only first date input control value has changed.</li>
</ol>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.2.3</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome 54, Edge 38/14, Edge 39/15, Firefox 50</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.3</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> 6.6.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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] feature request
[ x ] 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
[ x ] 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">I'm using <code class="notranslate">Router.navigate([], {queryParams:{foo:'bar'}})</code> for updating Query Params for the current Route (couldn't find any other way to do this).<br>
When I call <code class="notranslate">navigate</code> twice with the same queryParams the returned Promise resolves to <code class="notranslate">null</code>. Documentation only tell's about <code class="notranslate">true</code> and <code class="notranslate">false</code>.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">This should be part of the official docs, because this seems to be the only way to see if the queryParams have changed. <code class="notranslate">ActivatedRoute.queryParams</code> will not get triggered on <code class="notranslate">Router.navigate</code> if the queryParams don't change. Or is there any other way?</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="constructor(route: ActivatedRoute, router: Router) {
  route.queryParams.subscribe(val =&gt; console.log(&quot;Query Params: &quot;, val));
  router.navigate([], {queryParams:{foo:'bar'}}).then(val =&gt; console.log(&quot;Navigate: &quot; + val));
  router.navigate([], {queryParams:{foo:'bar'}}).then(val =&gt; console.log(&quot;Navigate: &quot; + val));
}"><pre class="notranslate"><code class="notranslate">constructor(route: ActivatedRoute, router: Router) {
  route.queryParams.subscribe(val =&gt; console.log("Query Params: ", val));
  router.navigate([], {queryParams:{foo:'bar'}}).then(val =&gt; console.log("Navigate: " + val));
  router.navigate([], {queryParams:{foo:'bar'}}).then(val =&gt; console.log("Navigate: " + val));
}
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">I want to call a method each time the queryParams change (either because of <code class="notranslate">Router.navigate</code> or because the user edited the URL manually). And each queryParams change will update a form. And each form update will set the new queryParams and trigger the method call. And there's also a button inside the form that will re-execute the method.<br>
Though I need a reliable way to find out if queryParams changed.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">macOS Sierra, VS Code, npm, webpack, webpack-dev-server</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.1 and 4.0.0-beta.1</li>
</ul>

<p dir="auto">Tested with 2.4.1 and 4.0.0-beta.1</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 55</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript 2.0.10</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
7.3.0</p>
</li>
</ul>