YogeshChauhan.com
How to send and receive query strings via links in Angular 9?
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

dreamhost

Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?



Recently Posted

Feb 24 WordPress get_posts Examples Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields?



You might also like these

5 Ways to Loop Through JavaScript ArraysJavaScriptHow to check if radio button is checked or not using JavaScript?JavaScriptHow to create a Star Ratings using CSS?CSSHow to create a simple tab interaction using CSS?CSSaddcslashes() and addslashes() String Functions in PHPPHPQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScript