How to send and receive query strings via links in Angular 9?

Send Query Parameters in Angular 9

We can use RouterLink directive to add queries in links. It lets you link to specific routes in your app.

Consider the following route configuration:

[{ path: 'user/:name', component: UserCmp }]

 When linking to this user/:name route, we use the RouterLink directive.

If the link is static, you can use the directive as follows:

<a routerLink="/user/bob">link to user component</a>

If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.

For instance,

['/team', teamId, 'user', userName, {details: true}]

…means that we want to generate a link to…

/team/11/user/bob;details=true

Multiple static segments can be merged into one.

For e.g.

['/team/11/user', userName, {details: true}]

The first segment name can be prepended with /, ./, or ../:

👉 If the first segment begins with /, the router will look up the route from the root of the app.

If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.

And if the first segment begins with ../, the router will go up one level.

You can set query params and fragment as follows:

...
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>
...

RouterLink will use these to generate this link:

/user/bob#education?debug=true

You can also tell the directive to preserve the current query params and fragment:

...
<a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment>
  link to user component
</a>
...

You can tell the directive how to handle queryParams.

Available options are:

'merge': merge the queryParams into the current queryParams

'preserve': preserve the current queryParams

default/'': use the queryParams only

Same options for NavigationExtras#queryParamsHandling.

...
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
  link to user component
</a>
...

You can provide a state value to be persisted to the browser's History.state property.

It's used as follows:

...
<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
  link to user component
</a>
...

Use in a method

...
method_name() {
  this.router.navigate(['/dvd'], { queryParams: { sort: 'popular' } });
}
...

The link will look like this:

http://example.com/dvd?sort=popular

Same works for multiple param as well:

method_name() {
  this.router.navigate(['/dvd'], { queryParams: { sort: 'popular', 'limit': '25' } });
}

The link will look like this:

http://example.com/dvd?sort=popular&limit=25

Access the values from query strings

Step 1: Import ActivatedRoute

...
import { ActivatedRoute } from '@angular/router';
...

Step 2: Add object in constructor

...
  constructor(private router_object: ActivatedRoute) { }
...

Step 3: Get the parameters

...
ngOnInit() {
   console.log(this.router_object.snapshot.queryParamMap.get('sort'));
}
...

It will print:

popular

Credit: Angular.io

Share this post