Component Input Binding in Angular Router
HTML-код
- Опубликовано: 19 июл 2024
- Learn everything about Angular Forms 🚀
bit.ly/advanced-angular-forms...
👉 See All Angular Courses - bit.ly/discounted-course-bundle
🕒 Time Codes:
00:00:00 - Intro;
00:01:19 - Routes handling in Angular;
00:02:14 - Idea behind Component Input Binding;
00:04:39 - Naming conflict resolution
00:05:44 - Real-life use case;
00:09:35 - Outro;
🔗 Source code from the tutorial:
github.com/DMezhenskyi/angula...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi 
Наука
💡 Short Frontend Snacks (Tips) every week here:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
flawless video, you know when the video is going to be cool when it comes from decoded frontend master
Thanks for this kind feedback :)
Many people are unaware of the full range of features Angular offers, as the framework is always expanding. This type of video would be a valuable resource for spreading knowledge and awareness.
as like as always, it was great.
thank you
Меж красава, пам'ятаю цей канал коли ще тут тільки сотня людей була підписана)
always I'm waiting for your course,
i really appreciate for your kind
it's really useful for angular developers
Awesome just amazing thanks for your knowledge ❤
Thanks Dmytro Mazhenskyi, can you create a tutorial on how to deploy the Angular SSR to Firebase or other clouds, thank you very much.
Dmytropedia!!
Haha 😂 I wouldn’t trust this wiki 😅
Cool video, very useful!
Thanks for another useful video, Dmytro) If you have time, do you plan to create a large project using new technologies? I think it would be great , for example, recording a video once a week and finally creating a big one with all Angular nuances)
Thx ☺️. As always, you are the best!
Great as usual 🎉
thanks really helpful. on the next can you make ngrx/signal i like your teaching thanks!😊😊
This is great but for refactoring purposes it would be great to have in the route definition some mapping between the input name and the value in the route.
Do you mean something more explicit like in Directive Composition API where we explicitly define which input/outputs can be exposed?
What i like to do is to redeclare the input import to its respective use case. Basically if i have a param from the route i reimport the input but assign a different alias (in the import statement) to it, this way its clear what this import does and where the content is captured from. import { input as RouteInput } from "..." and so on
Yes, I saw idea like the one you described :) It makes a lot of sense if you know that the component will be always created by router and the input data will be received always via router. However, it might bring some confusion if the component is used in some other place but as a normal component that receives input data via a classical input binding :)
How do you connect these two worlds? Signals and rxjs? When do you always use signal and when rxjs? Might you do video about it?
why don't you make an rxjs course? I think will be highly appreciated!
Great Video as always. With which vscode extentions do you use for for formating the code. when i use angular 17+ with the new syntax in single component file the formatting becomes weird. i used prettier until angular 17, now i format manually :\
Hi Dmytro, great video as always!!! One question, what should be the result if the we set the router input value binding using this approach, but at same time, someone update the input through the template approach. What should be the precedence of that? Should be that the highest one? Maybe the new Input should be typed in some way or maybe better should have a custom configuration object to restrict the usage linked only to the routing. What do you think about that?
HI GOOD STUFF like always but i have a question what if my rout has format like this demo/:categoryId/:productId how i can bind also categoryId ?
I m a bit puzzled with the recommendation of standalone components. In the begining angular said its for new people to have lower learning curve. Is it now becoming standard? Why?
Awesome, learnt something new. I'm an angular noob and your videos are really helpful ❤. BTW I have a few questions (may be trivial ones 😅) :
1. I saw you used some Class properties starting with #. What does this mean conventionally pls. When do we use this ?
2. Is this withComponentInputBinding available only in the latest versions of angular?.
Thanks🙏
Hey 👋 thanks for your feedback.
1. In the modern Js, the # sign is a native “private” property that makes it truly private even at runtime when Typescript’s “private” keyword makes property private only at compile time.
2. This feature is available from v16 ;)
@@DecodedFrontend thanks. So will prefixing the class property with # in angular also make the property private after angular compiles the component into js ?
@@ramalakshmanans-gb6xg yes, exactly :)
@@DecodedFrontend Thanks for replying to my doubts so quickly 🙏❤️
Nice video as usual.
I would very much like to use this feature since it open so many possibilities.
How do we include this into a gigantic app without having to refactor everything at the same time? Is it possible?
From what I know, there are no dedicated schematics currently... :(
Thank you for the explanation, it was very helpful.🙂 I have a question: Can componentInputBinding also be achieved with a resolveFn? If so, how is its priority? 🤔
Hi,
That's a great question 👍 when data in relovleFns is resolved, it will be merged with the ActivatedRoute data, so it will have the highest priority and override URL and query params.
Hi,
Thanks for the explanation. I have tested the scenario and as you said, it overrides others. 🙂
Nice video. Is it possible to change (router params) Input by two way binding? What would happen if I have @Input Id and Output IdChange. I hope you know what I mean.
Hey :) Interesting question. I just checked and it seems like it works but it doesn't change the state (params) of the router. So, basically the model.set('new value') emits the new value to the component input as if it came from the router but the router state remains the unchanged.
What if we pass normal input through component with name collision e.g. ?
Thanks for your question!
There won't be any collision. The router input binding works only for the component that has been created by the router. If the same component is created by another component (e.g. by declaring it in another component template) then the binding component inputs with the Router won't happen.
How to modding data.description from [routerLink] to not show the param in url? is it possible?
Just ran into something, maybe worths a video? I'm trying to implement a custom module (with forRoot and forFeature static methods) that returns ModuleWithProviders, just to wrap the import of another module. My use case: I wanted to add some logic to that (check localStorage or something, and either return a module or nothing). But as soon as I write ANYTHING else in those forRoot or forFeature static methods, except a simple return statement (like an IF statement or even just a console log), then I get a typescript error where I am trying to import that module in my app.module imports: ""Value at position X is not a reference. Value could not be determined statically. Unable to evaluate function call of a complex function blah blah". How can we add some logic in this case? And why doesn't it even allow an harmless console.log?
I think this is because the compiler wants to know the providers returned by the module at compile time but the value from the local storage will be known only at run time, so that's why it is can not be statically determined.
I would try to investigate the resolution modifier useFactory that allows choosing the provider implementation at runtime. It will probably slightly change the API you wanted initially but you probably solve your issue.
Thanks for the suggestion! Perhaps the best way to go. I thought about the NgModule approach because I've found it to look pretty... but since it's not working as I expected...
EDIT: actually, I'm a bit confused... I rushed to answer. But after that I realised that useFactory works in the providers array, while my case is importing a module, in the imports array. It doesn't have anything to do with the providers array
Cool video. Can we apply this approach for activeRoute.snapshot.parent?.data ?
Thanks for the feedback:) Could you please clarify a bit about what you would like to achieve? Do you mean if it is possible to bind the router state to the child components?
In our proj we are using in ngOnit() {.... const bla = this.activeRoute.snapshot.parent?.data['blabla']..} and my question is can we somehow apply an approach that you explain for this case?
@@alexmatveev7730 Do you mean a reactive approach? Yes you can do something similar like this
private route = signal(inject(ActivatedRoute));
protected url = computed(() => {
return this.route()
.snapshot.url.map((segment) => segment.path)
.join('/');
});
@@poh9044 but you inject activeroute. But in video implemented by input. So I wondering if for me case can we do like this.
First, thank you very much for your content; it's very helpful and professional.
Second, I have a question about the required input filled from the URL data or query params when the value is not filled. It seems to me that the component renders with no errors or warnings, and it needs an extra check.
Is that right, or did I miss something?
Example:
// URL example: /url?someParam=1234
@Input({required: true}) someParam: string
// Case: /url
with no params
Thanks again for everything you do.
Hiw we can use this feature with resolvers?
Hey! Of course. The data resolved by “resolvers” goes to the “data” of the activated route, so it will work as it is described in the video :)
Watching this video now I feel like an idiot for all the hoops and manipulation I did to maintain state for my pagination 🤦🏻♂️🤦🏻♂️🤦🏻♂️
Is this feature available for legacy routing modules?
This feature is supported by angular 16.2+ for Standalone and NgModules-based routing.
@@DecodedFrontend thanks!
What version supports this
Starting from v16
I very like computedAsync from lib ngxtension
ngxtension is in general a great lib :)
Hi Dmytro, would you record a video about structuring project using standalone components. Now standalone feature is by default but i think lot of us still use modules. I would like to see how would you organize and architecture project using standalone api.
I could image the hell, when you don’t know, where is the input came from :)
yeah... it is a bit magic-ish, I agree :D
the issue was no issue 😅 cause it was easily resolved with a `WrittableSignal` (