Angular How to update queryParams without changing route

Question

I am trying to update  add  remove  queryParams from a component  In angularJS  it used to be possible thanks to     location search  f    filters         setter  location search    filters            getter   I have an app with a list that the user can filter  order  etc and I would like to set in the queryParams of the url all the filters activated so he can copy paste the url or share it with someone else   However  I don t want my page to be reloaded each time a filter is selected   Is this doable with the new router

User · Answer

You can navigate to the current route with new query params, which will not reload your page, but will update query params.

Something like (in the component):

constructor(private router: Router) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

Note, that whereas it won't reload the page, it will push a new entry to the browser's history. If you want to replace it in the history instead of adding new value there, you could use { queryParams: queryParams, replaceUrl: true }.

EDIT: As already pointed out in the comments, [] and the relativeTo property was missing in my original example, so it could have changed the route as well, not just query params. The proper this.router.navigate usage will be in this case:

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });

Setting the new parameter value to null will remove the param from the URL.

User · Answer

Radoslaw Roszkowiak s answer is almost right except that relativeTo  this route is required as below    constructor    private router  Router    private route  ActivatedRoute        changeQuery       this router navigate          relativeTo  this route  queryParams

User · Answer

If you want to change query params without change the route  see below example might help you  current route is    search  amp  Target route is without reload page      search query love     submit value  string          this router navigate            queryParams    query  value               then     gt  this search q              search keyword any           do some activity using    please note   you can use this router navigate    search   instead of this router navigate

User · Answer

I ended up combining urlTree with location go  const urlTree   this router createUrlTree              relativeTo  this route         queryParams               newParam  myNewParam                   queryParamsHandling   merge                this location go urlTree toString       Not sure if toString can cause problems  but unfortunately location go  seems to be string based

User · Answer

Better yet - just HTML   lt a  routerLink   quot    quot   queryParams   quot  key   value   quot  gt Your Query Params Link lt  a gt  Note the empty array instead of just doing routerLink  quot  quot  or  routerLink   quot    quot

User · Answer

In Angular 5 you can easily obtain and modify a copy of the urlTree by parsing the current url  This will include query params and fragments     let urlTree   this router parseUrl this router url     urlTree queryParams  newParamKey      newValue      this router navigateByUrl urlTree      The  correct way  to modify a query parameter is probably with the createUrlTree like below which creates a new UrlTree from the current while letting us modify it using NavigationExtras   import   Router   from   angular router    constructor private router  Router       appendAQueryParam        const urlTree   this router createUrlTree           queryParams    newParamKey   newValue         queryParamsHandling   merge       preserveFragment  true        this router navigateByUrl urlTree        In order to remove a query parameter this way you can set it to undefined or null

User · Answer

The answer with most vote partially worked for me  The browser url stayed the same but my routerLinkActive was not longer working after navigation   My solution was to use lotation go   import   Component   from   angular core   import   Location   from   angular common   import   HttpParams   from   angular common http    export class whateverComponent     constructor private readonly location  Location  private readonly router  Router        addQueryString         const params   new HttpParams        params append  param1    value1        params append  param2    value2        this location go this router url split      0   params toString             I used HttpParams to build the query string since I was already using it to send information with httpClient  but you can just build it yourself   and the this  router url split      0   is to remove all previous query string from current url

User · Answer

First  we need to import the router module from angular router and declare its alias name  import   Router   from   angular router   --- gt  import class AbcComponent implements OnInit    constructor      private router  Router --- gt  decalre alias name             1  You can change query params by using  router navigate  function and pass the query parameters  this router navigate       queryParams    id   abc   day   1   name   dfd          It will update query params in the current i e activated route   The below will redirect to abc page with  id  day and name as query params  this router navigate    abc      queryParams    id   abc   day   1   name                  dfd         It will update query params in the  abc  route along with three query paramters   For fetching query params -      import   ActivatedRoute   from   angular router     import activated routed      export class ABC implements OnInit        constructor          private route  ActivatedRoute   declare its alias name                 ngOnInit           console log this route snapshot queryParamMap get   id       this will fetch the query params

User · Answer

Try  this router navigate          queryParams        query  value           will work for same route navigation other than single quotes

[angular] Angular: How to update queryParams without changing route

Examples related to angular

Examples related to query-parameters

Examples related to angular-router