Component Input Binding in Angular Router

Рет қаралды 9,703

Күн бұрын

Пікірлер: 66

@DecodedFrontend 6 ай бұрын

💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

@haroldpepete 6 ай бұрын

flawless video, you know when the video is going to be cool when it comes from decoded frontend master

@DecodedFrontend 6 ай бұрын

Thanks for this kind feedback :)

@mohammadmollaei6278 6 ай бұрын

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

@sadman4eg_ 6 ай бұрын

Меж красава, пам'ятаю цей канал коли ще тут тільки сотня людей була підписана)

@AmarSingh-uw1db 6 ай бұрын

Awesome just amazing thanks for your knowledge ❤

@Aliakbaresmaeiliiii 6 ай бұрын

always I'm waiting for your course, i really appreciate for your kind it's really useful for angular developers

@genyklemberg 6 ай бұрын

Great as usual 🎉

@gagiksimonyan3782 6 ай бұрын

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)

@pollo_cesar_ 6 ай бұрын

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.

@DecodedFrontend 6 ай бұрын

Do you mean something more explicit like in Directive Composition API where we explicitly define which input/outputs can be exposed?

@danywalls 6 ай бұрын

Dmytropedia!!

@DecodedFrontend 6 ай бұрын

Haha 😂 I wouldn’t trust this wiki 😅

@SheriffZmroka 6 ай бұрын

Cool video, very useful!

@CodeZakk 6 ай бұрын

thanks really helpful. on the next can you make ngrx/signal i like your teaching thanks!😊😊

@hartnil93 6 ай бұрын

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 :\

@HatemAmer-tp6vi 6 ай бұрын

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.

@hisoka500 6 ай бұрын

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 ?

@avikaco 5 ай бұрын

Thanks Dmytro Mazhenskyi, can you create a tutorial on how to deploy the Angular SSR to Firebase or other clouds, thank you very much.

@xingfucoder2627 6 ай бұрын

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?

@ramalakshmanans-gb6xg 6 ай бұрын

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🙏

@DecodedFrontend 6 ай бұрын

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 ;)

@ramalakshmanans-gb6xg 6 ай бұрын

@@DecodedFrontend thanks. So will prefixing the class property with # in angular also make the property private after angular compiles the component into js ?

@DecodedFrontend 6 ай бұрын

@@ramalakshmanans-gb6xg yes, exactly :)

@ramalakshmanans-gb6xg 6 ай бұрын

@@DecodedFrontend Thanks for replying to my doubts so quickly 🙏❤️

@MikitaMaiseichyk 6 ай бұрын

Thx ☺️. As always, you are the best!

@pedrofernandes2005 6 ай бұрын

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?

@DecodedFrontend 6 ай бұрын

From what I know, there are no dedicated schematics currently... :(

@zeynalalakus4540 6 ай бұрын

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? 🤔

@DecodedFrontend 6 ай бұрын

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.

@zeynalalakus4540 6 ай бұрын

Hi, Thanks for the explanation. I have tested the scenario and as you said, it overrides others. 🙂

@fnzz6981 6 ай бұрын

why don't you make an rxjs course? I think will be highly appreciated!

@0106bartek 6 ай бұрын

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.

@DecodedFrontend 6 ай бұрын

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.

@MStoica 6 ай бұрын

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?

@DecodedFrontend 6 ай бұрын

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.

@MStoica 6 ай бұрын

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

@BC2Monster 6 ай бұрын

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

@DecodedFrontend 6 ай бұрын

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 :)

@IstvanKrasnyanszki 6 ай бұрын

How to modding data.description from [routerLink] to not show the param in url? is it possible?

@adoniasalcantara522 4 ай бұрын

Is this feature available for legacy routing modules?

@DecodedFrontend 4 ай бұрын

This feature is supported by angular 16.2+ for Standalone and NgModules-based routing.

@adoniasalcantara522 4 ай бұрын

@@DecodedFrontend thanks!

@loko1944 6 ай бұрын

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?

@alexmatveev7730 6 ай бұрын

Cool video. Can we apply this approach for activeRoute.snapshot.parent?.data ?

@DecodedFrontend 6 ай бұрын

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?

@alexmatveev7730 6 ай бұрын

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?

@poh9044 6 ай бұрын

@@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('/'); });

@alexmatveev7730 6 ай бұрын

@@poh9044 but you inject activeroute. But in video implemented by input. So I wondering if for me case can we do like this.

@praktycznewskazowki6733 6 ай бұрын

What if we pass normal input through component with name collision e.g. ?

@DecodedFrontend 6 ай бұрын

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.

@SiarheiMalko 6 ай бұрын

Hiw we can use this feature with resolvers?

@DecodedFrontend 6 ай бұрын

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 :)

@paweld.9542 26 күн бұрын

it doesn't work with the latest approach using the SignalInput input()

@CaptM44 6 ай бұрын

What version supports this

@DecodedFrontend 6 ай бұрын

Starting from v16

@NikolaGolijanin-m8s 6 ай бұрын

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.