Angular query params 

In this video we will discuss Query String Parameters in Angular. Creating and reading Query String Parameters is somewhat similar to creating and reading required and optional route parameters. We discussed required and optional route parameters in Parts 43 and 44 of Angular CRUD tutorial.
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Text version of the video
csharp-video-tu...
Slides
csharp-video-tu...
Angular CRUD Tutorial
• Angular CRUD tutorial
Angular CRUD Tutorial Text Articles & Slides
csharp-video-tu...
All Dot Net and SQL Server Tutorials in English
www.youtube.co...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
Query parameters are usually used when you want the parameters on the route to be optional and when you want to retain those parameters across multiple routes. For example, on the LIST route, you search for a specific employee. You then click on one of the employees in the search results to view that specific employee details on the DETAILS route. At this point, when we navigate back to the LIST route we want to retain the search term used, so we can display the filtered list instead of the full employee list.
Just like optional route parameters, query parameters are not part of the route configuration and therefore they are not used in route pattern matching.
Passing query string parameters in code : We use the second argument of the Router service navigate() method to pass query string parameters.
1. Create an object with queryParams as the key.
2. The value is an object with key/value pairs.
3. The key is the name of the query parameter and the value is the value for the query parameter.
this._router.navigate(['employees', employeeId], {
queryParams: { 'searchTerm': this.searchTerm, 'testParam': 'testValue' }
});
The query string parameters start with a question mark and are separated by & as you can see below.
localhost:4200/employees/3?searchTerm=John&testParam=testValue
Passing query string parameters in the HTML
[a [routerLink]="['/employees']"
[queryParams]="{ 'searchTerm': 'john', 'testParam': 'testValue'}"]
List
[/a]
Preserve or Merge Query String Parameters : By default, the query string parameters are not preserved or merged when navigating to a different route. To preserve or merge Query Params set queryParamsHandling to either preserve or merge respectively.
Preserve query string parameters in code
this._router.navigate(['/employees', this._id], {
queryParamsHandling: 'preserve'
});
Please note : queryParamsHandling is available in Angular 4 and later versions. If you are using Angular 2, you would not have queryParamsHandling. You will have to use preserveQueryParams and set it to true. preserveQueryParams is deprecated since Angular 4.
Merge query string parameters in code :
this._router.navigate(['/employees', this._id], {
queryParams: { 'newParam': 'newValue' },
queryParamsHandling: 'merge'
});
Preserve query string parameters in the HTML :
[a [routerLink]="['/list']"
queryParamsHandling="preserve"]
Back to List
[/a]
Merge query string parameters in the HTML :
[a [routerLink]="['/list']"
[queryParams]="{'newParam': 'newValue'}" queryParamsHandling="merge"]
Back to List
[/a]
Next Video : How to read query params.