Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4/5 - route paramMap vs params

People also ask

What is difference between params and ParamMap?

Obsolete answer. An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter. An Observable that contains a map of the query parameters available to all routes.

What is the use of ParamMap in angular?

ParamMaplinkA map that provides access to the required and optional parameters specific to a route. The map supports retrieving a single value with get() or multiple values with getAll() .

What is queryParamMap?

queryParamMap - An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

How does angular read route parameters?

Reading Route ParametersThe ProductDetails component must read the parameter, then load the product based on the ID given in the parameter. The ActivatedRoute service provides a params Observable which we can subscribe to to get the route parameters (see Observables).


September 2021 update

The following answer is no longer true, and the Angular team says:

There are no current plans to remove params or queryParams and there's no benefit to advising against their use.

Obsolete answer

According to the documentation :

Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.

params — An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

Simple and efficient !


September 2021 update

The following answer is no longer true, and the Angular team says:

There are no current plans to remove params or queryParams and there's no benefit to advising against their use.

Obsolete answer

Actually there is no difference but params is pretty old and may be deprecated soon

paramMap

An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

queryParamMap

An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.


Note : The paramMap provide more convenience to play with route parameter. Having following three methods:

  1. has()
  2. get()
  3. getAll()

has() :

this.router.navigate(['example', id]); 

this.activatedRoute.paramMap.subscribe(params => {
  console.log(params.has('id')); // true
})

get() :

this.router.navigate(['example', "id","another ID"]); 

this.activatedRoute.paramMap.subscribe(params => {
  console.log(params.get('id'));
})

getAll() :

this.router.navigate(['example', { foo: ['bar', 'baz'] } ]);

this.activatedRoute.paramMap.subscribe(params => {
  console.log(params.getAll('foo'));
})