Angular 5 URL routing with a button click and retain the querystring params in the url

Question

I have a URL which is like this

http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0

The router module knows to display based on this

{ path: 'criminal/hearings', component: HearingsComponent, pathMatch: 'full'},

but now I have a button click in which I want to maintain the querystring.

button html

<button type="button" (click)="addHearing()" class="btn btn-primary">Add Hearing</button>

typescript function

addHearing(){
    this.router.navigate(['/cr/edithearings']) // how to include the querystring???
}

I want to add the existing querystring to above button click event then in the route module it goes to proper route, along with the querystring

{ path: 'criminal/edithearings', component: HearingEditComponent, pathMatch: 'full'},

http://localhost:4200/criminal/edithearings?HOW_to_add?

santosh singh · Accepted Answer · 2018-01-02 22:12:28Z

3

If you are navigating using HTML template, you can use preserveQueryParams="true"

Notice that preserveQueryParams is without a square bracket.

Eg:

<a [routerLink]="['/navigate-to']" preserveQueryParams="true">

In-code example :

addHearing(){
    this.router.navigate(['somewhere'], { queryParamsHandling: "preserve" });
}

edited Jan 2, 2018 at 22:12

answered Jan 2, 2018 at 22:08

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

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

3 Comments

user9036522 Over a year ago

so do this in the html instead? I have a <button> with (click) ... function call and so it is in typescript then

user9036522 Over a year ago

SCORE, TY very much.

santosh singh Over a year ago

@ScottLeary : Welcome :)

Laker · Accepted Answer · 2018-01-02 22:02:43Z

2

addHearing(){
    this.router.navigate(['/cr/edithearings'], { queryParams: { key: value } })
}

navigate has a queryParams parameter

answered Jan 2, 2018 at 22:02

Laker

1,8624 gold badges21 silver badges32 bronze badges

3 Comments

user9036522 Over a year ago

so it will add in all the existing url params?

Laker Over a year ago

You have to set it. Take the params from the url and add it to the addHearing function.

user9036522 Over a year ago

how do i set it? key: value value is red line under it

Collectives™ on Stack Overflow

Angular 5 URL routing with a button click and retain the querystring params in the url

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related