Angular RouterLink queryParamsHandling for optional params

Question

Is there a clean way to merge the current optional queryParams with an additional optional queryParam on a link in the template?

Current url: /search;brand=Trek

Desired goto link: /search;brand=Trek;start=1 (startCount will be incremented)

I know Angular supports the ability to merge normal queryParams (https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html), but I don't think it works with optional queryParams.

That's why this doesn't work:

<a class="nav-btn"
   queryParamsHandling="merge"
   [routerLink]="[ { start: startCount+1 } ]">
    Next Page
</a>

Any suggestions?

Try adding { preserveQueryParams: true }

vcs
– vcs

2017-05-21 02:41:40 +00:00
Commented May 21, 2017 at 2:41 — vcs
– vcs, Commented May 21, 2017 at 2:41
This is deprecated.

Kevin LeStarge
– Kevin LeStarge

2017-06-21 19:09:19 +00:00
Commented Jun 21, 2017 at 19:09 — Kevin LeStarge
– Kevin LeStarge, Commented Jun 21, 2017 at 19:09

Nikhil Sikka · Accepted Answer · 2017-06-20 15:00:06Z

4

Try

<a class="nav-btn"
   queryParamsHandling="preserve" <--- instead of 'merge'
   [routerLink]="[ { start: startCount+1 } ]">
    Next Page
</a>

answered Jun 20, 2017 at 15:00

Nikhil Sikka

1088 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin LeStarge Over a year ago

Nope, didn't seem to work. It got rid of all of the previous params and added the new start param.

Kevin LeStarge · Accepted Answer · 2017-06-21 19:50:23Z

1

I don't think this is possible with the latest release of Angular, so here's my workaround solution:

Subscribe and save the params:

ngOnInit() {
  this.route.params.subscribe((params: Params) => {
    for(let param in params){
        if(params.hasOwnProperty(param)){
            console.log('param:', param);
            this.currentParams[param] = params[param];
        }
    }
  });
}

Then add additional optional params to currentParam object:

this.currentParams.start = this.startCount+1;

And re-navigate to your route with all the params:

this.router.navigate([ 'search', this.currentParams ]);

answered Jun 21, 2017 at 19:50

Kevin LeStarge

8,5225 gold badges23 silver badges35 bronze badges

Comments

Manjesh · Accepted Answer · 2018-05-25 19:04:39Z

0

for preserving and merging on existing query params:

<a class="nav-btn" preserveQueryParams [routerLink]="['/yourRoute']" [queryParams]="{start: startCount+1}"></a> <a class="nav-btn" mergeQueryParams [routerLink]="['/yourRoute']" [queryParams]="{start: startCount+1}"></a>

edited May 25, 2018 at 19:04

answered May 25, 2018 at 18:59

Manjesh

11 bronze badge

Collectives™ on Stack Overflow

Angular RouterLink queryParamsHandling for optional params

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related