How to update/append the url in Angular7

Question

I would like to append the browser url based on the view enabled in the same page.

Default URL: http://localhost:4200/xxx/disciplines

On click on the table row it will update like URL: http://localhost:4200/xxx/disciplines?disciplineId=1100

onRowClicked(event: any) {
    this.isRowSelected = true;
    this.selectedId = event.data.id; //event.id;
    this.selectedItem = event;
    console.log(this.selectedItem);
    this.dataService.set(event);
    this.router.navigate([], { queryParams: { disciplineId: this.selectedId } });

  }

Can not we update the selected ID automatically without using this.router.navigate([], { queryParams: { disciplineId: this.selectedId } });
How to append the new value like http://localhost:4200/xxx/disciplines?disciplineId=1100&disciplineView=create on clicking on some button.

If I use this this.router.navigate([], { queryParams: { disciplineView: view } });

url changed to

http://localhost:4200/xxx/disciplines?disciplineView=create

instead

http://localhost:4200/xxx/disciplines?disciplineId=1100&disciplineView=create

Expert advise please?

Possible duplicate of Angular 2 updating URL path params with no redirect — Prashant Pimpale
– Prashant Pimpale, Commented Jun 17, 2019 at 4:53
If I get your question right, On first click of the button, you need http://localhost:4200/xxx/disciplines?disciplineId=1100 and on the second click of the same button you need http://localhost:4200/xxx/disciplines?disciplineId=1100&disciplineView=create? — KiraAG
– KiraAG, Commented Jun 17, 2019 at 4:55
If you want the above, you should use queryParamsHandling: "merge" . like this: this.router.navigate([], { queryParams: { disciplineView: view }, queryParamsHandling: "merge" }); — KiraAG
– KiraAG, Commented Jun 17, 2019 at 4:57
Ok you can follow my option on using queryParamsHandling: "merge" above. — KiraAG
– KiraAG, Commented Jun 17, 2019 at 5:00

KiraAG · Accepted Answer · 2019-06-17 06:03:39Z

0

You should use queryParamsHandling: "merge" . like this: this.router.navigate([], { queryParams: { disciplineView: view }, queryParamsHandling: "merge" });

So this will merge your new params to the existing activated route.

edited Jun 17, 2019 at 6:03

answered Jun 17, 2019 at 5:53

KiraAG

7835 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How to update/append the url in Angular7

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related