Angular queryParams vs. queryParamsMap

Could anybody explain the difference between queryParams and queryParamsMap to me?

I have a component:

constructor(
   protected route: ActivatedRoute,

and:

ngOnInit() {
        this.route.queryParams.subscribe((queryParams) => {
            let lang = queryParams['lang'];
            console.log('user has lang: ', lang);
        });

It works perfectly fine, however, I wonder if there is any reason I should use queryParamsMap?

>Solution :

In Angular, the ActivatedRoute service provides access to information about a route associated with a component that is being loaded in an application. This information includes route parameters, data, and query parameters.

queryParams is an observable that allows you to subscribe to changes to the query parameters of the route. It returns the current value of the query parameters as an object.

On the other hand, queryParamsMap is also an observable that returns the current value of the query parameters, but as a ParamMap object, which is a dictionary of the query parameters with the name of the parameter as the key and the value of the parameter as the value.

Here’s an example of how you might use queryParamsMap:

this.route.queryParamsMap.subscribe((queryParamsMap: ParamMap) => {
  let lang = queryParamsMap.get('lang');
  console.log('user has lang: ', lang);
});

In general, queryParams and queryParamsMap can be used interchangeably, and it’s mostly a matter of preference which one you choose to use. queryParamsMap may be slightly more efficient if you need to perform multiple lookups on the query parameters, because it allows you to use the get() method to retrieve the value of a specific parameter, rather than having to access it directly through the object. However, for most use cases, either option should work fine.