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
06:09 Reading route parameters (@Input)
07:20 Routing in action (@Input)
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 KZbin 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.
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
View my KZbin content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#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

[@deborah_kurata]

Glad you liked it! Thank you!

[@skayona]

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

[@deborah_kurata]

That is kind of you to say. Glad you like them!

[@Nabulio85]

Thank you ! Very good job, your channel deserves more subscribers

[@deborah_kurata]

Thank you for watching! And yes! 😊

[@ankitmvp]

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

[@deborah_kurata]

So nice of you to say. Thank you! 😊

[@shubhambahre9021]

I simply loved this explanation

[@deborah_kurata]

Thank you!

[@robertkameni5975]

I love your stuff. Really great Job Deborah🔥

[@deborah_kurata]

Great to hear! Thank you! 😊

[@advance5189]

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

[@deborah_kurata]

Thank you so much!

[@adnanrazapk1]

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

[@deborah_kurata]

Thank you so much! 😊

[@haroldpepete]

great explanation, angular looks easy when you explain it

[@deborah_kurata]

That is kind of you to say! Thanks! 😊

[@_dinesh]

amazing tips! thank you so much. 💕

[@deborah_kurata]

Glad it was helpful!

[@joeyvico]

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

[@deborah_kurata]

Glad it was helpful! 😊

[@AntonioRibeiro-qs3fy]

very nifty and handy....thank you

[@deborah_kurata]

Great to hear it was useful!

[@franckozeusmakita7022]

amazing Job. thanks you from Germany!

[@deborah_kurata]

Thank you very much! 😊

[@yelose85]

Thank you very much!😄

[@deborah_kurata]

You're welcome 😊

[@lqt74]

Great! Thank you!

[@deborah_kurata]

Thanks for watching!

[@test-user-123]

Cool!

[@PixelFlowers]

Thank you 🎉

[@ranjanadeore2957]

Great thank you mam providing great content 🙂

[@deborah_kurata]

Thank you for watching! 😊

[@rd_45]

Amazing feature

[@deborah_kurata]

Yes! I've been using it regularly now for my route parameters.

[@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.

[@deborah_kurata]

Glad it was useful! The signals features are not yet complete, including using them with @Input, with two-way binding, and with forms. These are features the team is still working on. I'll be sure to do some videos as soon as those features are available.

[@KYO-wb9dg]

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

[@deborah_kurata]

Thank you. The down side of a resolver is that it blocks the navigation until the data is resolved. This has more info: angular.schule/blog/2019-07-resolvers

[@MultiWarrr]

can i access parent route params by this approach

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

[@deborah_kurata]

I'm not sure I understand the context of the question. A difference in what way?

[@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?

[@deborah_kurata]

I'm on pto this week. I'll try it when I get back to the office.

[@davidkooffreh4752]

Would this work in a route resolver

[@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

[@deborah_kurata]

Thank you! I *think* I understand what you are asking? Any way you could create a little Stackblitz example?

[@scellilisa]

@@deborah_kurata seems like everytime i post the stackblitz link, my comment is removed.... where can i send it to you? thanks

[@deborah_kurata]

My apologies ... I didn't see your reply until now. What social media are you on? You can send it via one of those if you're still interested.

[@peter2967]

7:07 Can you use input transform instead of casting to a Number? Like so: @Input({ transform: numberAttribute }) id = '';

[@EmilioDegiovanni]

It's a function. @Input({transform: (id) => Number(id)}) id = 0;

[@deborah_kurata]

Yes! And it looks like @EmilioDegiovanni provided the syntax below. (I was planning on covering that in a separate, upcoming video. :-))

[@deborah_kurata]

Thank you for providing the correct syntax!

[@peter2967]

@@deborah_kurata Angular 16.1 actually exposes numberAttribute and booleanAttribute coercion functions to handle this

[@deborah_kurata]

Yep, you are correct. I hadn't seen the new `numberAttribute` and `booleanAttribute` when I did this video. I've since put all of the above in this video: kzbin.info/www/bejne/a5C8i4l8ZbR0q5I Thank you!

[@jeffnikelson5824]

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

[@deborah_kurata]

Thank you for the feedback. Yeah, I contemplated whether I should cover the "how routing works" to clarify how/where these parameters are set. Maybe that should have been its own video so the majority that already know that could skip that part?

[@ErickCcsVzla]

@@deborah_kurata To be honest, we already have a lot of KZbin channels explaining everything really fast. I like that Deborah explains slowly and takes time to speak about small important details like in this video. But, we know how it is, it's impossible to please everybody.

[@deborah_kurata]

@@ErickCcsVzla Thank you! 😊😊

[@baldin13]

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

[@deborah_kurata]

Thank you so much!

[@mihailion2468]

Oh my lord light theme

[@deborah_kurata]

Out of curiosity ... is this comment because you personally use dark and this doesn't? Or is it because it is really too hard to read/see with the light theme? I ask because I know most developers use dark. But we've been told by most conferences and companies such as Pluralsight to always use light when recording videos because they are easier to see ... especially on smaller devices. Thanks!

[@mihailion2468]

@@deborah_kurata Hey deborah, your video was insightful, I didn't mean to disrespect. For me, it's mainly personal, I use dark themes everywhere. But it is also an issue if I'm scrolling at 11 or 12 PM through KZbin, and the video makes my eyes bleed. Kind of hard to watch as you said. Cheers