Angular read query string parameters 

In this video we will discuss, how to read query string parameters in Angular
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
To read query parameters we use ActivatedRoute service. We use this same service to read required and optional route parameters.
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
Inject the ActivatedRoute service using the component class constructor
constructor(private _route: ActivatedRoute) { }
Depending on your project requirements, you can then use either the snapshot approach or the observable approach. We discussed the difference between these 2 approaches and when to use one over the other in Part 42 of this Angular CRUD tutorial.
Part 42 - Subscribe to angular route parameter changes
• Subscribe to angular r...
In Angular there are 3 types of parameters.
1. Required parameters
2. Optional parameters
3. Query parameters
When working with any of these parameters, the following properties and methods are very useful.
Member Description
has(name) Returns true if the parameter is present and false if not. Very useful to check for the existence of optional route and query parameters
get(name) Returns the parameter value as a string if present, or null if not present in the map. Returns the first element if the parameter value is an array of values
getAll(name) Returns a string array of the parameter value if found, or an empty array if the parameter is not present in the map. Use getAll when a single parameter could have multiple values
keys Returns a string array of all the parameters in the map
Please note : For required and optional route parameters, we use the paramMap property of the ActivatedRoute object and for Query Parameters, we use queryParamMap property.
Use the snapshot approach if the query params does not change during the lifetime of this component.
if (this._route.snapshot.queryParamMap.has('searchTerm')) {
this.searchTerm = this._route.snapshot.queryParamMap.get('searchTerm');
} else {
this.filteredEmployees = this.employees;
}
On the other hand, if you expect the query parameter value to change during the life time of this component, and if you want to react and execute some code in response to that change, then use the Observable approach.
this._route.queryParamMap.subscribe((queryParams) =] {
if (queryParams.has('searchTerm')) {
this.searchTerm = queryParams.get('searchTerm');
} else {
this.filteredEmployees = this.employees;
}
});