{"id":890,"date":"2023-05-02T05:00:00","date_gmt":"2023-05-02T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=890"},"modified":"2026-02-25T01:45:44","modified_gmt":"2026-02-25T09:45:44","slug":"angular-16-preview-binding-router-information-to-component-inputs","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-16-preview-binding-router-information-to-component-inputs\/","title":{"rendered":"Binding Router Information to Component Inputs"},"content":{"rendered":"\n

Passing parameters to routes is a frequent task with Angular. Before Angular 16, we had to inject the ActivatedRoute<\/a><\/code> service and retrieve the parameters from that service using the snapshot<\/code> or params<\/code> properties.<\/p>\n\n\n\n

Now, we can get those values automatically bound to the component inputs using the following router config:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If you’re using the RouterModule.forRoot()<\/code> syntax, then enabling component input binding looks like this:<\/p>\n\n\n

RouterModule.forRoot(routes, {bindToComponentInputs<\/span>: true<\/span>});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\n\n\n
For instance, assuming we have a URL parameter called id<\/code>, if we enable the component input binding feature, then all we need in our component is an @Input<\/code> decorator to receive that value:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
What I like about this option is that our components do not need the ActivatedRoute<\/code> service anymore, meaning they don’t have to be used just as routed components. Instead, they could be used in other scenarios where the id is passed as an HTML attribute, just like any other non-routed component. As a result, our components are more generic and not tied to a single use case.<\/p>\n","protected":false},"excerpt":{"rendered":"
Passing parameters to routes is a frequent task with Angular. Before Angular 16, we had to inject the ActivatedRoute service and retrieve the parameters from that service using the snapshot or params properties. Now, we can get those values automatically bound to the component inputs using the following router config: If you’re using the RouterModule.forRoot() […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,25],"tags":[],"class_list":["post-890","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/890","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=890"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/890\/revisions"}],"predecessor-version":[{"id":2387,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/890\/revisions\/2387"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
According to the documentation<\/a>, this option can bind all route data with key-value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.<\/p>\n\n\n\n