{"id":1443,"date":"2023-09-12T05:00:00","date_gmt":"2023-09-12T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1443"},"modified":"2023-09-08T15:49:51","modified_gmt":"2023-09-08T22:49:51","slug":"accessing-route-information-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/accessing-route-information-with-angular\/","title":{"rendered":"Accessing route information with Angular"},"content":{"rendered":"\n<p>The Angular router comes with many interesting features, such as <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/lazy-loading-standalone-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">lazy-loading<\/a>, <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/route-guards-canactivate-canactivatechild-candeactivate\/\" target=\"_blank\" rel=\"noopener\" title=\"\">guards<\/a>, <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/resolver-function-for-the-angular-router\/\" target=\"_blank\" rel=\"noopener\" title=\"\">resolvers<\/a>, or nested routes. <\/p>\n\n\n\n<p>One of these features is the ability to access route parameters and route information within the component displayed by the router. This can be done by injecting the <a href=\"https:\/\/angular.io\/api\/router\/ActivatedRoute\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>ActivatedRoute<\/code><\/a> service in our component. <\/p>\n\n\n\n<p>This <code>ActivatedRoute<\/code> contains a lot of information:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"631\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-11.png\" alt=\"\" class=\"wp-image-1445\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-11.png 411w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-11-195x300.png 195w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The most commonly used attributes are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/angular.io\/api\/router\/ActivatedRoute#paramMap\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>paramMap<\/code><\/a>: An Observable of route parameters such as <code>id<\/code> in the route <code>\/product\/:id\/info<\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/angular.io\/api\/router\/ActivatedRoute#queryParamMap\" target=\"_blank\" rel=\"noopener\" title=\"\">queryParamMap<\/a><\/code>: An Observable of query parameters such as <code>q<\/code> in the route <code>\/product\/search?q=test<\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/angular.io\/api\/router\/ActivatedRoute#data\" target=\"_blank\" rel=\"noopener\" title=\"\">data<\/a><\/code>: An Observable of the data resolved by route resolvers such as <code>hero<\/code> in this <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/resolver-function-for-the-angular-router\/\" target=\"_blank\" rel=\"noopener\" title=\"\">example of a resolver<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><code>snapshot<\/code> gives us the current value of <a href=\"https:\/\/angular.io\/api\/router\/ActivatedRouteSnapshot\" target=\"_blank\" rel=\"noopener\" title=\"\">those same parameters<\/a> instead of using Observables.<\/p>\n\n\n\n<p>Another option appeared with Angular 16. We can <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-16-preview-binding-router-information-to-component-inputs\/\" target=\"_blank\" rel=\"noopener\" title=\"\">bind router information to component inputs<\/a> instead of using <code>ActivatedRoute<\/code>.<\/p>\n\n\n\n<p>This works for the three categories of parameters covered earlier: Route params, query params, and resolved route data.<\/p>\n\n\n\n<p>This means that this old and verbose approach:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"741\" height=\"208\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-12.png\" alt=\"\" class=\"wp-image-1446\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-12.png 741w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-12-300x84.png 300w\" sizes=\"auto, (max-width: 741px) 100vw, 741px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>can be replaced with the following concise and router-independent code: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"332\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-13.png\" alt=\"\" class=\"wp-image-1447\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-13.png 385w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-13-300x259.png 300w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The only config needed for this to work is the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-16-preview-binding-router-information-to-component-inputs\/\" target=\"_blank\" rel=\"noopener\" title=\"\">one line of code described in this article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Angular router comes with many interesting features, such as lazy-loading, guards, resolvers, or nested routes. One of these features is the ability to access route parameters and route information within the component displayed by the router. This can be done by injecting the ActivatedRoute service in our component. This ActivatedRoute contains a lot of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,25],"tags":[],"class_list":["post-1443","post","type-post","status-publish","format-standard","hentry","category-angular","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1443"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1443\/revisions"}],"predecessor-version":[{"id":1449,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1443\/revisions\/1449"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}