Yogesh Chauhan's Blog

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

in Angular on May 18, 2020

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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
KeyValuePipe in Angular 9AngularIN and BETWEEN Operators in SQLSQL/MySQLPHP Login System using PDO Part 2: Login using Email or UsernamePHPWhat is XP (Extreme Programming) and When should it be used?MiscellaneousCreate a menu with a curtain falling animation using CSS and JavaScriptCSSHow to make flexbox items of the same size?CSS