Use @Input to Read Angular Route Parameters

One of the new features in Angular v16 is automatic route parameter mapping using the Input decorator.

What does that mean?

It means we can use an input property to automatically read route parameters, instead of using the Activated Route service. This gives us a shorter and easier syntax.

In this video, let's walk through an explanation and an example.

*Content*
00:00 Route parameter mapping using the input decorator
00:44 How routing works
03:31 Routing in action (Activated Route)
04:14 Reading route parameters (Activated Route)
05:28 Enabling route parameter mapping using the Input decorator
07:33 Why use route parameters? Deep Linking!
08:40 Wrap Up

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I love creating content for developers! I create YouTube videos and write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award in Developer Technologies, and I'm a Google Developer Expert (GDE) in Angular.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #demo
#angularrouting #routinginangular #routingangular #angularroutingtutorial #whatisroutinginangular #howtoroutinginangular

[danielabonvini]

Amazing video as always, I especially liked the little addition of the explanation about deep linking

[skayona]

Debora, thanks a lot! I wish I could explain things as you do. Thanks for doing such amazing videos!

[ankitmvp]

Thanks a lot for this ... Really loved the way you explain the concepts ... Just wow !!! 🤩

[advance]

Just wanna say that your tutorials are on point🔥.Thanks for the great content!

[Nabulio]

Thank you !

Very good job, your channel deserves more subscribers

[joeyvico]

Wonderful!! I always thought that the snapshot.params way was too clunky. Thanks again Deborah. Amazing teaching

[haroldpepete]

great explanation, angular looks easy when you explain it

[robertkameni]

I love your stuff. Really great Job Deborah🔥

[adnanrazapk]

simple to the point explanation, recently subscribe and loved your content. 🔥

[ranjanadeore]

Great thank you mam providing great content 🙂

[KYO-wbdg]

Great video! Just little bit curious, is it better to use Resolver to reload data?

Hi Deborah, tanks for the video, does exist any difference from Input Binding for parameters and input binding for communication between components?

[TheZukkino]

Thanks for the explaination.
Could you please make a video concerning form management with @Input and Signals? I've noticed that signals and forms do not fit well, mostly if the signal must be used to fullfill the form and the same data must be used to perform a submit.

[MultiWarrr]

can i access parent route params by this approach

[jeffnikelson]

We love your videos deborah ❤️ but please try to come to the point faster. this video could be 3 min long and still explain the new content in detail

[MirceaAgrigoroaie]

If the id is not specified in the route can we use the Input to read the url param.. for example ?id=2&name=something . Will angular know to map these to id and name inputs automatically?

[scellilisa]

Nice Explanations like always thanks!!!

still have a small question:
i have for example a search input above the product details, where i can look directly for ids of products.
Imagine i looked at product 5 at first load from the component, so id:5 is in the url. but then i want to see product 10. i write 10 in my input field, on submit i load right product, but writing new id in the url did not happened.
is there a new way to update that parameter? or do i need to continue injecting the router and replace more or less with navigateByUrl? hope you have an alternative way ^^ thx

thank you for your help

[peter]

7:07 Can you use input transform instead of casting to a Number? Like so:

@Input({ transform: numberAttribute }) id = '';

[baldin]

awesome video! Watched from freecode and again here on yt, if I could hit the like button 1000 times I would, tks a lot!