Hi Vijay! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
After a long time, I have seen an advanced angular UA-camr with advanced content. I just loved how you explain things, and really is putting some advanced Angular concepts into practice, please never stops and keep bringing us this awesome advanced content
Hi ! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
Awesome tutorial with clear explanation as usual, thanks! I would suggest you to also maybe briefly discuss the Bridge Design Pattern alone before jumping on implementation with Angular so we can have a clearer idea of what exactly we want to achieve using Angular's DI (some diagrams probably would help). But thanks again this was a great explanation! =)
Awesome as always. Note, NgTemplateOutlet could be an alternative approach making the concrete components similarly irrelevant to the wrapper component. That way a new interface or injection token wouldn't be needed as well. Many thanks for your great tutorials.
This is really useful video. I was looking for something like this for a long time. Thank you that you are creating this kind of advanced Angular topics.
Where have you been, bro? I just loved how do you explain things, and really is putting some advanced Angular concepts in practice, please never stops and keep bring us this awesome advanced content.
It's really awesome , thank you so much. Can you please discuss deeper on this injection token, injector and how angular resolve the dependency through token. Keep marking videos like this. Excellent work.
@@DecodedFrontend I have watched your session on Angular air. Really awesome. I want to thank you for sharing this good amount knowledge 🙏 keep teaching us more.
Hi Sourish! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
I can't thank you enough for explaining so nicely. Amazing topics and the way you explain is awesome. Keep posting good videos like this. I wish you get whatever you want in life...
Fantastic video! There is a serious lack of advanced, "enterprise", angular guides. Looking forward to watching your remaining videos in the series and even more advanced topics! Consider zooming in vscode to make the code easier to read. GG
Thank you very much for your feedback and great hint! It was already zoomed (175% both VS Code and the Browser) but may I ask you which device did you use for watching? So I would test it on something similar and try to adjust it.
@@DecodedFrontend I was watching on a one plus 7 pro. To be a little more clear. I could read it, I just think a bit more would make it easier. Thanks so much for your reply and care! I appreciate your concern for striving to improve the quality of your video and care for your viewers!
I see... I have checked today on a device with a similar screen and yeah.. it could be better. The problem is that when to zoom it up to (+200) then viewer sees less code strings and sometimes you're loosing context but I think I could decrease the size of the terminal because in 90% it is useless information there (just some compilation status). I will try it in the next video 😉
Thanks for a great feedback! I am happy that my video helped you. By the way my next upcoming video is exactly about DI in Angular 😉 it will be released on Monday
This is a great example of bridge pattern illustration. Most cases I see on the internet as "bridge pattern" example, they are just equivalent to Strategy pattern, so there are no reasons not to use strategy pattern, but this example clearly is suitable for Bridge. Good job!
I had no idea about this pattern until I watched your video. After watching it, I used this pattern to implement a reasonably complex validation in a text field. And it turned out to be one of the most elegant and robust solutions I have ever coded in Angular. Thanks a lot 🙏for making videos on such advanced Angular topics, I look forward to more such videos in future! Btw, any plans on making similar content for @NestJS? 😃
HI Gulsharan! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
Big thanks to you, sir, for this helpful video. I've switched from react to angular and a lot of angular concepts is pretty new to me (as I am just a junior), and I struggle with all this OOP stuff, but with your explanations I can clarify this, and get better in creating reusable components and writing good extendable code. My admiration)
very underrated channel! you deserve way more views. I feel like there aren't many channels that explain advanced Angular concepts and you do an amazing job at it
ive been trying to figure out how you can select the widget from a dropdown or some sort of list to load them in dynamically. these videos are great. ive watched probably all your vids and love the dependency injection series, that really helped with this.
This is a very slick and elegant pattern, thank you! My one critique on your videos: Please pre-build all the functionality and go directly to the heart of the advanced concepts you want to explain. Also, if the title of your video is referring to the bridge pattern, explain it briefly and then relate it to the material. I caught the one sentence you uttered where you say it is the token that makes it a bridge. It made sense but it was very small detail in your explanation. Highlight the important points and get to them quickly. Your videos are really good, but if you want them to be truly useful you should not assume we have infinite time to watch you type code and explain the obvious things in the code we can see. In short: be brief and succinct. This could have been a three-to-five minute video, which is much, much more useful than half an hour. In any case, I really appreciate your help. Thanks again!
HI Gaurang! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
Oh.. that's a good & hard question :) Well, very often implementation of Bridge and Strategy (also some other patters) is the same. Usually the difference just in intention. Bridge is about splitting abstraction and implementation on 2 different hierarchies which can be split independently. As example we have clear hierarchy for widgets (implementation) and it could be similar hierarchy for widget wrapper (abstraction), so both hierarchies could be developed and scale independently but stay compatible. It allows you to use any widget inside any wrapper and they will work. And Strategy pattern is about picking some concrete algorithm for some specific context. But yeah.. in this particular case when we have only one element in abstraction hierarchy is looks like Strategy pattern as well :)
Hi Alex! Yes you can. Just use @ContentChildren annotation instead @ContentChild. @ContentChildren will return you QueryList, literally it is a list of Widget instances. The Data structure QueryList implements Iterable interface, so you can iterate through it as if it would be a usual array. Just remember that if you use @ContentChildren the "earliest" point when Widgets will be resolved is ngAfterContentInit hook. In ngOnInit it will be "undefined" 🙂
A lot of thanks for such a valuable content. As always you've done a great job which all of us appreciate! though I am wondering about couple of things... Could we use abstract class instead of injection token? I suppose it would be possible both implementing it and providing it as a token. And, as well as that, are there any difference for our finale purpose, pehaps some edge cases which I am not aware about?
Hi Arthur! Thanks for feedback! Yes, you can use abstract class as well. Injection Token has one small advantage though - it is a liiiitle bit more lightweight. Since ivy, angular creates during compilation a factory for abstract class as well but doesn’t do it for injection token. You can read more about it in this PR: ua-cam.com/users/redirect?event=comments&redir_token=QUFFLUhqa1RybHJrYmE3dzZFcC1EbFVXZ0J4LTh2bFdMd3xBQ3Jtc0tueEdkMnRrTU5SeXdwZkc1R1ZsVjdvbVhaTTFEem5XUlVGVlAyNEtxQllSR2FXYlMwY3lDN0MxTm5GUm1qb1RQeFUxVzVIZXNIdkVlSEdRNjU1ZVFmVDJHd1ItTkxxWjFjT2JYdFlxYWdoZEdXMFNFcw&q=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F37506&html_redirect=1
Hi! Sure. You can use also abstract class instead of injection token but in some cases InjectionTokens can have less impact on your bundle size. Check my last video ua-cam.com/video/iBA2VLvqNr4/v-deo.html there you can also find comparison of both approaches and another use-case for this pattern. load and refresh methods will be called by parent component (WidgetWrapperComponent) when it heeds. As example refresh() is being called when user clicks on "refresh" button in WidgetWrapperComponent template and load when WidgetWrapperComponent initialised.
There is also another really cool use-case for actually the same pattern (but named differently). There we will dive a bit deeper ua-cam.com/video/iBA2VLvqNr4/v-deo.html
It depends. In this particular case you don’t Need it. forwardRef you need if you reference some class before it’s declaration. In this case you might think that it is the case but in fact code in @Component annotation will be processed after the component class itself so at that time the component class will be defined. I think I will create a separate video about it because you’re not the first who asks me :)
nice technique! is there a way to declare the provider in the NgModule instead of the components themselves? (in case each child component belongs to a specific module)
No, it will not work like you suggest. The whole idea here is that you configure (provide) services to a NodeInjector which is part of Component but when you configure it in NgModule you configure ModuleInjector. I have a video series about Angular Dependency Injection and would recommend you to have a look at it to understand why your suggestion won't work :) ua-cam.com/play/PLX7eV3JL9sfmJ6AaZj9eDlAKrJrEul4Vz.html
great tuutorial- how would this work if you are using the same wrapper that contains more than 1 content children that extends the same interface. I guess you can use content-children and do some type of condition if > 1 then forEach.load / forEach.refresh.. seems kind of ugly though
Hi! Actually yes, you should use @ViewChildren and then call load method in forEach loop, but you do not need if> 1 check. It is fine actually to call method in the loop. As example if you have a look at design pattern Observer (do not confuse with RxJs Observables) you will see how observer’s method is being called in the loop :)
Hi Dmytro! Great tutorials, I really appreciate what you're doing! I think I missed something while exploring DI topic. Can we use two existing instances of two different classes for a single token key "WIDGET" without putting multi property to "true"
How can we apply the bridge pattern on view child ? Here we are using content projection but what if we call multiple components that needs to have different load behavior ?
I have one question on this.. U shown how u can call a function from a parent to child using token.. In the same manner can i call a function from child to parent(I don't want to use event emitter)
Hi, thanks for your question. Yes, you can inject parent component in your child the same way as you do it with services. so in your child comp `constructor(private parent: ParentComponent) {}` and then you can call any public method from parent. But I would recommend to do it only when there is no way to use Input/Output
the WIDGET token id not provided only below the WidgetWrapper Component, not above. If we If we are following the Injector hierarchy, how is the dependency getting resolved here
how can we use "useExisting: WeatherWidgetComponent" ? in fact I don't know when WeatherWidgetComponent key register in _container(map) (i believe value of useExisting should be exist in _container as key in relevant Injector class. is it wrong?
@@DecodedFrontend Ah, okay! I'm bit of an extension nut, so I'm always on the look out for new pragmatic tools. lol I'm really enjoying your content. I'm leading a team of juniors, so I'm having to brush up on my Angular -- design patterns in particular. Do you have a repo or know of any working examples I can get some inspiration from? I'm needing to refactor a fairly large but poorly put together PWA. Many of the controller files are way too large, even though many of them are using the smart/dumb component dynamic and unidirectional data flow. I'm hoping to discover on how to best break them down.
And apologies for asking another random question; I have ADHD and I just happened to be in the middle of thinking about it when I saw your response. lol
Hi Dmytro, awesome video, I've been using this pattern since you uploaded this into your channel 😀 Can you upload another version of this using Angular 15? haha. I'm kind of stuck right now on ng14 because this pattern no longer works with ng 15 😅
Hey, Dmytro, after 8 months I came back to your video, which is a sign of LEGENDARY content) I've got another question now. This pattern you showed and called Bridge pattern reminds me of Strategy so hard, by both implementation and the problem you solved. Problem: you have a family of algorithms (widgets in our case) which has interface: Widget. These algorithms can do different things (concrete loading and refreshing implementations) and are being provided to the Context (WidgetWrapperComponent - concrete implementation, not abstraction) dynamically by use of DI which is great=) So that looks like a pure Strategy problem and pure strategy pattern implementation. The Bridge Pattern would be applicable if apart from Widget Abstraction we would have also wrapper abstraction. E.g. abstract class WidgetWrapper{ abstract ngonInit(): void {} abstract onRefresh(): void{} } Then you could have a few concrete implementations of it: WidgetWrapperComponent1, WidgetWrapperComponent2... WidgetWrapperComponent - lets same it is the same as you showed in you example. LoggingWidgetWrapperComponent: LoggingWidgetWrapperComponent implements WidgetWrapper, OnInit { ngOnInit(){ this.widget.load(); console.log('Widget data is loaded') } onRefresh(){ this.widget.refresh(); console.log('Widget data is refreshed') } } But the main idea is not to find a way how to implement pattern, but to find a pattern that solves a general problem, and identify what general problem we have. And I think you solved it BRILIANTLY, but with Strategy instead of Bridge, which is a right way in this case most probably. Because once again I cannot see crucial part of Bridge: two hierarchies of abstractions. I see one abstraction - Widget, it's implementations - WeatherWidget, VelocityWidget, and a concrete context - WidgetWrapperComponent that uses Widget abstraction. What you think about it?
Hey man. I totaly agree with you. It looks like a Strategy pattern. It's a particular case of Bridge pattern. E.g. We have two different classes and each class has subclasses. We want to have like a bridge between parent classes. In this case we use Bridge pattern. But if we have only one hierarchy we can use Strategy patter.
I don't know if anyone has passed for the same situation as I, but if you're using Angular version 10 or before. this approach doesn't work, because @ContentChield doesn't support Injection Tokken as a parameter on this version. so be aware and make sure that you're Angular version is updated.
In which exactly version it didn't work out for you? In Angular 10 it has to work because in this video Angular 10 is being used. Also I think that angular 9 should also support it (but here I am not 100% sure). The only one thing is that you have to use `as any` hack for Angular 10 and bellow.
@@DecodedFrontend I was using version 10.0.2 and I tried to use “as any” but the problem was that my content chield was always undefined, so I update the project and works.
@@gleisonsubzeroKZ Then I think there were some another issue... didn't you forget { static: true } in you ContentChild? because if you have static:false or didn't have it at all then angular will resolve it only in AfterContentInit hook and inside OnInit it will be always undefined
🔥🔥🔥I just released one of the most advanced courses about Angular Forms. Check it out: bit.ly/advanced-angular-forms 👉Use coupon code UA-cam_DISCOUNT to get a 15%-off discount
After a long time, I have seen a serious angular UA-camr with advanced content. Videos are very good and explained very well.
Glad to hear that! Thank you :)
Hi Vijay! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
I'm on a spree watching your videos, a breath of fresh air
Glad to hear that! Thanks
After a long time, I have seen an advanced angular UA-camr with advanced content. I just loved how you explain things, and really is putting some advanced Angular concepts into practice, please never stops and keep bringing us this awesome advanced content
Ooh I was not aware of this kind of implementation earlier, Great job dude. It is actually an Advance talk.
Hi! Thanks for feedback ;) Yes, it is advanced. Enjoy!
Hi ! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
This the kind of Angular content I want to see on youtube. Nice solution.
Thanks! More coming :)
Phenomenal coverage of an advanced topic. Not even GDEs are this good at explaining Angular like you. Keep up the excellent work!
Thanks a lot! :) I appreciate it and glad you liked it!
Awesome tutorial with clear explanation as usual, thanks!
I would suggest you to also maybe briefly discuss the Bridge Design Pattern alone before jumping on implementation with Angular so we can have a clearer idea of what exactly we want to achieve using Angular's DI (some diagrams probably would help).
But thanks again this was a great explanation! =)
Hi Alex!
This is a great and meaningful feedback. Thank you very much!
I will definitely take it into account your suggestion in next video 😉
Excellent job buddy, youtube really needs such high quality and descriptive angular videos. Thanks a ton.
Thank you for feedback! I am happy to hear that you like it :)
Thank you a lot, Dmitro. Або просто щиро дякую :)
Будь ласка 😉
Awesome as always. Note, NgTemplateOutlet could be an alternative approach making the concrete components similarly irrelevant to the wrapper component. That way a new interface or injection token wouldn't be needed as well. Many thanks for your great tutorials.
soooo useful to me .I really need to advanced level concepts so i can level my understand up of Angular .. Thank you
Very Nice video.. Got to know so many concepts.. Thanks for last minute explanation on how it works.. I understood lot of things.. Thank you
I'm happy to hear it! Thank you for the feedback
This is really useful video. I was looking for something like this for a long time. Thank you that you are creating this kind of advanced Angular topics.
Glad it was helpful!
Where have you been, bro? I just loved how do you explain things, and really is putting some advanced Angular concepts in practice, please never stops and keep bring us this awesome advanced content.
Thank you for such a great feedback! I am glad you like it ;)
It's really awesome , thank you so much. Can you please discuss deeper on this injection token, injector and how angular resolve the dependency through token. Keep marking videos like this. Excellent work.
Noted! Thanks for suggestion
@@DecodedFrontend I have watched your session on Angular air. Really awesome. I want to thank you for sharing this good amount knowledge 🙏 keep teaching us more.
Hi Sourish! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
thankyou for your videos. i always look forward to your videos !
Good job, Dmytro! Very actual problem and very good solution!
Just bought one of your courses after watching this video👍
Thank you for your support! I hope you will like it!
Where have you been, bro? This is my first time watching your video and I really love it. I have already subscribed though.
Great to hear it :) I hope next ones won't disappoint :D
@@DecodedFrontend Sure!
I can't thank you enough for explaining so nicely. Amazing topics and the way you explain is awesome. Keep posting good videos like this. I wish you get whatever you want in life...
Wow...Super awesome technique. Thanks for sharing. 🎉
This is just brilliant, I'm so happy I found your channel
Thanks, Taras!🙂
Fantastic video! There is a serious lack of advanced, "enterprise", angular guides. Looking forward to watching your remaining videos in the series and even more advanced topics!
Consider zooming in vscode to make the code easier to read. GG
Thank you very much for your feedback and great hint! It was already zoomed (175% both VS Code and the Browser) but may I ask you which device did you use for watching? So I would test it on something similar and try to adjust it.
@@DecodedFrontend I was watching on a one plus 7 pro. To be a little more clear. I could read it, I just think a bit more would make it easier.
Thanks so much for your reply and care! I appreciate your concern for striving to improve the quality of your video and care for your viewers!
I see... I have checked today on a device with a similar screen and yeah.. it could be better.
The problem is that when to zoom it up to (+200) then viewer sees less code strings and sometimes you're loosing context but I think I could decrease the size of the terminal because in 90% it is useless information there (just some compilation status). I will try it in the next video 😉
Nice. I have some trouble to understand DI in the Angular, so after this video i founded some case where i can use this mechanism
Thanks for a great feedback! I am happy that my video helped you. By the way my next upcoming video is exactly about DI in Angular 😉 it will be released on Monday
This is a great example of bridge pattern illustration. Most cases I see on the internet as "bridge pattern" example, they are just equivalent to Strategy pattern, so there are no reasons not to use strategy pattern, but this example clearly is suitable for Bridge. Good job!
I had no idea about this pattern until I watched your video. After watching it, I used this pattern to implement a reasonably complex validation in a text field. And it turned out to be one of the most elegant and robust solutions I have ever coded in Angular. Thanks a lot 🙏for making videos on such advanced Angular topics, I look forward to more such videos in future! Btw, any plans on making similar content for @NestJS? 😃
Thanks for your feedback :) No NestJS isn't planned but .. let's see ;)
HI Gulsharan! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
Big thanks to you, sir, for this helpful video. I've switched from react to angular and a lot of angular concepts is pretty new to me (as I am just a junior), and I struggle with all this OOP stuff, but with your explanations I can clarify this, and get better in creating reusable components and writing good extendable code. My admiration)
Hi Greg! It is awesome! I am glad that you make big progress and my video helps you with it 😉
Great job! Awesome explanation and really good examples
Thank you very much, Nikita! 😊
very underrated channel! you deserve way more views. I feel like there aren't many channels that explain advanced Angular concepts and you do an amazing job at it
Thank you very much for such a great feedback! I am so happy to see that my videos bring some value for you :)
Thanks man.
I used to do lot of if elss statment to identify the context.
Definitely will give it a try.👍
Glad it was helpful!
Absolutely amazing. Thanks for this explanation 🚀
Learnt new things, thanks for explaining amazing concepts
ive been trying to figure out how you can select the widget from a dropdown or some sort of list to load them in dynamically. these videos are great. ive watched probably all your vids and love the dependency injection series, that really helped with this.
Thanks! It was a perfect explanation, good job Dmytro 💪👍!!!
This is a very slick and elegant pattern, thank you! My one critique on your videos: Please pre-build all the functionality and go directly to the heart of the advanced concepts you want to explain. Also, if the title of your video is referring to the bridge pattern, explain it briefly and then relate it to the material. I caught the one sentence you uttered where you say it is the token that makes it a bridge. It made sense but it was very small detail in your explanation. Highlight the important points and get to them quickly. Your videos are really good, but if you want them to be truly useful you should not assume we have infinite time to watch you type code and explain the obvious things in the code we can see. In short: be brief and succinct. This could have been a three-to-five minute video, which is much, much more useful than half an hour. In any case, I really appreciate your help. Thanks again!
Amazing content man, keep going!
Thanks, will do!
Very useful stuff, thanks! Very well explained.
Excellent video. I finally understand something about tokens, and I learned something new about ContentChild (the `static: true` part)
Can you show more use-case where this bridge design pattern will be useful in angular ?
HI Gaurang! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking for developers. Let me know if interested!
Thank you for explanation. Good example.
Thank you for the feedback! Glad you liked it :)
simply a mind-blowing explanation boss.
Quite late to finding your videos but they are super useful - thank you!
Such a great job! Could you please then explain the difference between Bridge and Strategy design patterns?
Oh.. that's a good & hard question :)
Well, very often implementation of Bridge and Strategy (also some other patters) is the same. Usually the difference just in intention. Bridge is about splitting abstraction and implementation on 2 different hierarchies which can be split independently. As example we have clear hierarchy for widgets (implementation) and it could be similar hierarchy for widget wrapper (abstraction), so both hierarchies could be developed and scale independently but stay compatible. It allows you to use any widget inside any wrapper and they will work. And Strategy pattern is about picking some concrete algorithm for some specific context. But yeah.. in this particular case when we have only one element in abstraction hierarchy is looks like Strategy pattern as well :)
great implementation.
question: what if I have several "widget" components inside wrapper. Is there a way to get a list of widgets and not only one?
Hi Alex! Yes you can. Just use @ContentChildren annotation instead @ContentChild. @ContentChildren will return you QueryList, literally it is a list of Widget instances. The Data structure QueryList implements Iterable interface, so you can iterate through it as if it would be a usual array. Just remember that if you use @ContentChildren the "earliest" point when Widgets will be resolved is ngAfterContentInit hook. In ngOnInit it will be "undefined" 🙂
Thank you so much, I appreciate your efforts.
Is it possible to access the methods of the Host Component in the child component ?
Thank you! This is a good idea. I am doing something similar now and will try to do it in my task.
Great that you found usecase for it in your app 😉 thanks for feedback!
Thank you for this video and your channel!
A lot of thanks for such a valuable content. As always you've done a great job which all of us appreciate! though I am wondering about couple of things...
Could we use abstract class instead of injection token? I suppose it would be possible both implementing it and providing it as a token. And, as well as that, are there any difference for our finale purpose, pehaps some edge cases which I am not aware about?
Hi Arthur! Thanks for feedback!
Yes, you can use abstract class as well. Injection Token has one small advantage though - it is a liiiitle bit more lightweight. Since ivy, angular creates during compilation a factory for abstract class as well but doesn’t do it for injection token. You can read more about it in this PR: ua-cam.com/users/redirect?event=comments&redir_token=QUFFLUhqa1RybHJrYmE3dzZFcC1EbFVXZ0J4LTh2bFdMd3xBQ3Jtc0tueEdkMnRrTU5SeXdwZkc1R1ZsVjdvbVhaTTFEem5XUlVGVlAyNEtxQllSR2FXYlMwY3lDN0MxTm5GUm1qb1RQeFUxVzVIZXNIdkVlSEdRNjU1ZVFmVDJHd1ItTkxxWjFjT2JYdFlxYWdoZEdXMFNFcw&q=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F37506&html_redirect=1
Awesome content, thanks! U have a subscriber from Turkey now :P
Awesome, thank you! :D
Good job man!!! Loved it
Thank you! 😉
What is the purpose of using injection token and how the load and refresh method were trigger? can u elaborate it? Thanks
Hi! Sure.
You can use also abstract class instead of injection token but in some cases InjectionTokens can have less impact on your bundle size. Check my last video ua-cam.com/video/iBA2VLvqNr4/v-deo.html there you can also find comparison of both approaches and another use-case for this pattern.
load and refresh methods will be called by parent component (WidgetWrapperComponent) when it heeds. As example refresh() is being called when user clicks on "refresh" button in WidgetWrapperComponent template and load when WidgetWrapperComponent initialised.
Great Content, very useful
Amazing content. Keep going
There is also another really cool use-case for actually the same pattern (but named differently). There we will dive a bit deeper ua-cam.com/video/iBA2VLvqNr4/v-deo.html
Should we use useExisting: forwardRef(() => WeatherWidgetComponent) instead useExisting: WeatherWidgetComponent?
It depends. In this particular case you don’t Need it. forwardRef you need if you reference some class before it’s declaration. In this case you might think that it is the case but in fact code in @Component annotation will be processed after the component class itself so at that time the component class will be defined. I think I will create a separate video about it because you’re not the first who asks me :)
nice technique! is there a way to declare the provider in the NgModule instead of the components themselves? (in case each child component belongs to a specific module)
No, it will not work like you suggest. The whole idea here is that you configure (provide) services to a NodeInjector which is part of Component but when you configure it in NgModule you configure ModuleInjector. I have a video series about Angular Dependency Injection and would recommend you to have a look at it to understand why your suggestion won't work :) ua-cam.com/play/PLX7eV3JL9sfmJ6AaZj9eDlAKrJrEul4Vz.html
thank you it is really helpful !!! keep going
Thank you! :)
Nice and clear!
Thank you! :)
This is genius, thanks mate!
Great explanation bro.
Thanks 🙏🏻
Hello bro, I am really learning new things from your videos. By the way, could you please do a video on how to properly structure an angular app.
Hi! Thank you for your feedback and this great suggestion! I will add it to my list of topics :)
🔥🔥🔥 Awesome topic.... waaaaaooo, It would be very helpful, if you start video playlist for Spartacus. ..:) You are a nice tutor .
Why do you have to bother with the token stuff? Can't you just use the Interface inside the ContentChild input?
great tuutorial- how would this work if you are using the same wrapper that contains more than 1 content children that extends the same interface. I guess you can use content-children and do some type of condition if > 1 then forEach.load / forEach.refresh.. seems kind of ugly though
Hi! Actually yes, you should use @ViewChildren and then call load method in forEach loop, but you do not need if> 1 check. It is fine actually to call method in the loop. As example if you have a look at design pattern Observer (do not confuse with RxJs Observables) you will see how observer’s method is being called in the loop :)
Clear examples well explained. Thanks!
Thanks a lot bro!
thanks man, interesting stuff, goes good with the cup of tea :)
спасибо! Рад, что видос зашел)
Great trick!
Hi Dmytro! Great tutorials, I really appreciate what you're doing!
I think I missed something while exploring DI topic.
Can we use two existing instances of two different classes for a single token key "WIDGET" without putting multi property to "true"
Hi Denis! Unfortunately, it is not possible to do that.
Thanks a lot!
Love your content,
Can you please make a video about “Strategy Patter” in Angular ?
We would love to see it
How can we apply the bridge pattern on view child ? Here we are using content projection but what if we call multiple components that needs to have different load behavior ?
I have one question on this.. U shown how u can call a function from a parent to child using token.. In the same manner can i call a function from child to parent(I don't want to use event emitter)
Hi, thanks for your question.
Yes, you can inject parent component in your child the same way as you do it with services. so in your child comp `constructor(private parent: ParentComponent) {}` and then you can call any public method from parent. But I would recommend to do it only when there is no way to use Input/Output
Hi!!! Is the best practice use setTimeout() or exist any recommendations? Thank you.
the WIDGET token id not provided only below the WidgetWrapper Component, not above. If we If we are following the Injector hierarchy, how is the dependency getting resolved here
Thanks for the great content!
Hey Friend, it was really new learning for me... Thanks 🙏
Great video! Thank You Dmytro ;)
Thank you 😊
how can we use "useExisting: WeatherWidgetComponent" ? in fact I don't know when WeatherWidgetComponent key register in _container(map) (i believe value of useExisting should be exist in _container as key in relevant Injector class. is it wrong?
Great lesson! Thank you.
Awesome content!
Good explanation! Really usefull content!
What if you had used the Widget interface as the @ContentChild parameter?
It was helpful, Thanks
This is a random question, but what's the extension displayed at the bottom of your toolbar, right below Nx Console?
Oh, that was some extension for FTP but I forgot the name because I am not using it anymore
@@DecodedFrontend Ah, okay! I'm bit of an extension nut, so I'm always on the look out for new pragmatic tools. lol
I'm really enjoying your content.
I'm leading a team of juniors, so I'm having to brush up on my Angular -- design patterns in particular.
Do you have a repo or know of any working examples I can get some inspiration from?
I'm needing to refactor a fairly large but poorly put together PWA. Many of the controller files are way too large, even though many of them are using the smart/dumb component dynamic and unidirectional data flow.
I'm hoping to discover on how to best break them down.
And apologies for asking another random question; I have ADHD and I just happened to be in the middle of thinking about it when I saw your response. lol
@@bigk9000 I think this repo could inspire you a lot :) github.com/trungk18/angular-spotify
@@DecodedFrontend Thanks, man! Appreciate it! :)
Hi Dmytro, awesome video, I've been using this pattern since you uploaded this into your channel 😀
Can you upload another version of this using Angular 15? haha. I'm kind of stuck right now on ng14 because this pattern no longer works with ng 15 😅
Actually, this pattern works with Angular 15 :) I think your issue relates to something else.
@@DecodedFrontend Lol. yea it was an error on my code during my migration to v15 from 14, I managed to fixed it haha, btw thanks for your response !!
great !!!
Exceptional... 🥇
Thank you very much! Glad you liked it
Hey, Dmytro, after 8 months I came back to your video, which is a sign of LEGENDARY content) I've got another question now.
This pattern you showed and called Bridge pattern reminds me of Strategy so hard, by both implementation and the problem you solved.
Problem: you have a family of algorithms (widgets in our case) which has interface: Widget. These algorithms can do different things (concrete loading and refreshing implementations) and are being provided to the Context (WidgetWrapperComponent - concrete implementation, not abstraction) dynamically by use of DI which is great=) So that looks like a pure Strategy problem and pure strategy pattern implementation.
The Bridge Pattern would be applicable if apart from Widget Abstraction we would have also wrapper abstraction.
E.g. abstract class WidgetWrapper{
abstract ngonInit(): void {}
abstract onRefresh(): void{}
}
Then you could have a few concrete implementations of it: WidgetWrapperComponent1, WidgetWrapperComponent2...
WidgetWrapperComponent - lets same it is the same as you showed in you example.
LoggingWidgetWrapperComponent:
LoggingWidgetWrapperComponent implements WidgetWrapper, OnInit {
ngOnInit(){
this.widget.load();
console.log('Widget data is loaded')
}
onRefresh(){
this.widget.refresh();
console.log('Widget data is refreshed')
}
}
But the main idea is not to find a way how to implement pattern, but to find a pattern that solves a general problem, and identify what general problem we have. And I think you solved it BRILIANTLY, but with Strategy instead of Bridge, which is a right way in this case most probably. Because once again I cannot see crucial part of Bridge: two hierarchies of abstractions. I see one abstraction - Widget, it's implementations - WeatherWidget, VelocityWidget, and a concrete context - WidgetWrapperComponent that uses Widget abstraction.
What you think about it?
Hey man. I totaly agree with you. It looks like a Strategy pattern. It's a particular case of Bridge pattern. E.g. We have two different classes and each class has subclasses. We want to have like a bridge between parent classes. In this case we use Bridge pattern. But if we have only one hierarchy we can use Strategy patter.
I don't know if anyone has passed for the same situation as I, but if you're using Angular version 10 or before. this approach doesn't work, because @ContentChield doesn't support Injection Tokken as a parameter on this version.
so be aware and make sure that you're Angular version is updated.
In which exactly version it didn't work out for you?
In Angular 10 it has to work because in this video Angular 10 is being used. Also I think that angular 9 should also support it (but here I am not 100% sure). The only one thing is that you have to use `as any` hack for Angular 10 and bellow.
@@DecodedFrontend I was using version 10.0.2 and I tried to use “as any” but the problem was that my content chield was always undefined, so I update the project and works.
@@gleisonsubzeroKZ Then I think there were some another issue... didn't you forget { static: true } in you ContentChild? because if you have static:false or didn't have it at all then angular will resolve it only in AfterContentInit hook and inside OnInit it will be always undefined
@@DecodedFrontend
No I didn't forget to include static true, I really don't know why it was returning undefined.
Great!!!
Nice explanation of injection tokens)
It was soooo useful
Glad to hear that 😊
Instead of wrapping calls in an if, you can just use optional chaining: this.weatherWidget?.refresh()
🔥🔥🔥I just released one of the most advanced courses about Angular Forms. Check it out: bit.ly/advanced-angular-forms 👉Use coupon code UA-cam_DISCOUNT to get a 15%-off discount
Great video sir, you should be in Udemy!
Cool, thank you very much.
that's so cool. thanks
Very good!
nice example