CODEWITHSUNDEEP
javascriptangulartypescriptroutesangular-routing
user9036522
user9036522

Reputation:

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

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?

Upvotes: 0

Views: 4874

Answers (2)

santosh singh
santosh singh

Reputation: 28672

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" });
}

Upvotes: 3

Laker
Laker

Reputation: 1812

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

navigate has a queryParams parameter

Upvotes: 2

Related Questions