<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
[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
[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>
There doesn't seem to be a good way to interact with global and per-route query parameters.</p>
<p dir="auto">Let's say you have a search page and would like to apply filters that will be reflected in the url e.g. /search?fizz=buzz&amp;foo=bar or /search;fizz=buzz;type=bar. I would like to be able to delete my "fizz" filter and remove this from the url for a result of /search?foo=bar or /search;foo=bar.</p>
<p dir="auto">Currently,</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this._router.navigate(['../', this._route.snapshot.url[0].path , {type: 'bar'}], {relativeTo: this._route});"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_router</span><span class="pl-kos">.</span><span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'../'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_route</span><span class="pl-kos">.</span><span class="pl-c1">snapshot</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">path</span> <span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">type</span>: <span class="pl-s">'bar'</span><span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">relativeTo</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_route</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">will get me this behavior for per-route parameters or similarly for their global counterparts, but I have to retrieve the parameter object and play with it myself. Specifically with per-route parameters, there isn't a way to only change the queryParams without using ['../', '', ] followed by the parameters since in the current version trying something like ['./', ] will throw an error (though it looks to be explicitly checked and disallowed in <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/angular/angular/commit/34b3c534e73ab9ec06106b12717ae058a5ed86b2/hovercard" href="https://github.com/angular/angular/commit/34b3c534e73ab9ec06106b12717ae058a5ed86b2"><tt>34b3c53</tt></a>).</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
I would like to be able to easily manipulate the local and global query parameters. It looks like this will be easier to do with global query params after <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/angular/angular/commit/23ee29b6a2ae396f6ec13f71c9552e3e0a983c3c/hovercard" href="https://github.com/angular/angular/commit/23ee29b6a2ae396f6ec13f71c9552e3e0a983c3c"><tt>23ee29b</tt></a> though I would also like to be able to do this for local query params. Additionally, the current need to reach into the route.snapshot object to get the current path in order to manipulate the query parameters feels unnecessary and not robust.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
see "Current behavior"</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Other frameworks will allow me to easily perform this sort of manipulation and I would be able to like to do this the proper "Angular" way</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.4</li>
<li><strong>Browser:</strong> [Chrome  51]</li>
<li><strong>Language:</strong> [TypeScript 1.8.10]</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
[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
[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></p>
<p dir="auto">When navigating via the router service, a string path is required even if navigating within the same route, but only changing route parameters</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">If only providing an object with route params, the router should take the current route path and navigate with the updated parameters.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Given the following routes</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const projectsRoutes: RouterConfig = [
    {
        path: &quot;projects&quot;,
        component: ProjectsComponent,
        children: [
            {
                path: &quot;all&quot;,
                component: ProjectListComponent
            }
        ]
    }
];"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">projectsRoutes</span>: <span class="pl-v">RouterConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
    <span class="pl-kos">{</span>
        <span class="pl-c1">path</span>: <span class="pl-s">"projects"</span><span class="pl-kos">,</span>
        <span class="pl-c1">component</span>: <span class="pl-v">ProjectsComponent</span><span class="pl-kos">,</span>
        <span class="pl-c1">children</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
                <span class="pl-c1">path</span>: <span class="pl-s">"all"</span><span class="pl-kos">,</span>
                <span class="pl-c1">component</span>: <span class="pl-v">ProjectListComponent</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">]</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">From within the <code class="notranslate">ProjectListComponent</code> I should be able to use</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.router.navigate([ { query: 'test' } ], { relativeTo: this.activatedRoute });"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-kos">[</span> <span class="pl-kos">{</span> <span class="pl-c1">query</span>: <span class="pl-s">'test'</span> <span class="pl-kos">}</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">relativeTo</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">activatedRoute</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and the router navigate to</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/projects/all;query=test"><pre class="notranslate">/projects/all;query=test</pre></div>
<p dir="auto">Currently an error is thrown: <code class="notranslate">TypeError: Cannot read property 'path' of undefined</code></p>
<p dir="auto">To make this work I have to traverse upwards to come back to the same route.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.router.navigate([ &quot;../all&quot;, { query: 'test' } ], { relativeTo: this.activatedRoute });"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-kos">[</span> <span class="pl-s">"../all"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">query</span>: <span class="pl-s">'test'</span> <span class="pl-kos">}</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">relativeTo</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">activatedRoute</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">Navigating relatively within the current route</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.X</li>
<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>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5 | Dart]</li>
</ul>
<p dir="auto">cc: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bennadel/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bennadel">@bennadel</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vsavkin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vsavkin">@vsavkin</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/wardbell/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/wardbell">@wardbell</a></p>