Router 07: Activated Route, Retriew Route params, fragments and query params

Yuvaraj S
2 min readNov 15, 2022

--

In previous blog we have discussed how to pass query params and and fragments using angular router.

Link for the previous Blog : Router 06: Pass Query params and Fragments with Angular Router, via raw html and programatically
https://medium.com/@yuvayuvaraj720444/router-06-pass-query-params-and-fragments-with-angular-router-via-raw-html-and-programatically-88a06d5191e8

Retrieving Query Params is easy in angular router, we use activated route observable to fetch the params, query params and fragments.

To fetch we import activated route and inject in component, the activsted route observable we use,

  • Activated route param to fetch param
  • Activated route query param to fetch query param
  • Activated route fragment to fetch fragment.
code solution

To put into practice I have created a small demo, the link for the demo can be found Below
https://stackblitz.com/edit/angular-ivy-stle-router-r9miyh

Firstly I created a component and named it dynamic component. In Html Section, onclick the query params and fragments will pass dynamically.

dynamic component html

On clicking passQuery the query params will dynamicaly pass.

retriew() function will retrieve the passed params and console logs.

console logging retrieve param.

In Next Blog

Angular Router 08: Child Routes and Nested Child Routes

— — — — — — — — — End Of Lecture — — — — — — —

Check All lessons of Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b

--

--

Yuvaraj S

Frontend Developer with 6years of experience, I write blogs that are [Easy words + Ground Level Code + Live Working Link]. Angular | React | Javascript | CSS