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!
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! =)
After a long time, I have seen an advanced angular RUclipsr 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 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 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!
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!
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!
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 😉
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.
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...
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!
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
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!
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)
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.
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
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: ruclips.net/user/redirect?event=comments&redir_token=QUFFLUhqa1RybHJrYmE3dzZFcC1EbFVXZ0J4LTh2bFdMd3xBQ3Jtc0tueEdkMnRrTU5SeXdwZkc1R1ZsVjdvbVhaTTFEem5XUlVGVlAyNEtxQllSR2FXYlMwY3lDN0MxTm5GUm1qb1RQeFUxVzVIZXNIdkVlSEdRNjU1ZVFmVDJHd1ItTkxxWjFjT2JYdFlxYWdoZEdXMFNFcw&q=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F37506&html_redirect=1
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" 🙂
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 :)
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 :) ruclips.net/p/PLX7eV3JL9sfmJ6AaZj9eDlAKrJrEul4Vz
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"
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 :)
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 ruclips.net/video/iBA2VLvqNr4/видео.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 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 :)
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 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 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 😅
@@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
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 ?
There is also another really cool use-case for actually the same pattern (but named differently). There we will dive a bit deeper ruclips.net/video/iBA2VLvqNr4/видео.html
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?
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
@@DecodedFrontend 😂 seriously, thank you for all these videos. it helps a lot others to progress. I will take your course on graphql soon. is there another way to support your work? paypal or other platform?
@@Nabulio85 Glad to hear that my videos help, Kevin! Yeah, I have a link on PayPal for those who would like to support the channel - bit.ly/donate-to-decoded-frontend Much appreciate it :)
![Control Value Accessor in Angular [Advanced, 2020]](http://i.ytimg.com/vi/OrmIfW8Ak3w/mqdefault.jpg)
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
After a long time, I have seen a serious angular RUclipsr 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
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 😉
After a long time, I have seen an advanced angular RUclipsr 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
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!
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 :)
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 :)
Just bought one of your courses after watching this video👍
Thank you for your support! I hope you will like it!
thankyou for your videos. i always look forward to your videos !
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.
Wow...Super awesome technique. Thanks for sharing. 🎉
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 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!
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 ;)
Thank you a lot, Dmitro. Або просто щиро дякую :)
Будь ласка 😉
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!
Learnt new things, thanks for explaining amazing concepts
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!
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 😉
Good job, Dmytro! Very actual problem and very good solution!
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!
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...
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!
This is just brilliant, I'm so happy I found your channel
Thanks, Taras!🙂
Amazing content. Keep going
Great job! Awesome explanation and really good examples
Thank you very much, Nikita! 😊
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!
Great Content, very useful
Great explanation bro.
Thanks 🙏🏻
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
simply a mind-blowing explanation boss.
Amazing content man, keep going!
Thanks, will do!
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 :)
Thanks! It was a perfect explanation, good job Dmytro 💪👍!!!
Absolutely amazing. Thanks for this explanation 🚀
Excellent video. I finally understand something about tokens, and I learned something new about ContentChild (the `static: true` part)
Quite late to finding your videos but they are super useful - thank you!
Thanks a lot bro!
Thank you so much, I appreciate your efforts.
Thank you for this video and your channel!
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 😉
Nice and clear!
Thank you! :)
Very useful stuff, thanks! Very well explained.
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.
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 :)
Good job man!!! Loved it
Thank you! 😉
Great trick!
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!
This is genius, thanks mate!
Clear examples well explained. Thanks!
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: ruclips.net/user/redirect?event=comments&redir_token=QUFFLUhqa1RybHJrYmE3dzZFcC1EbFVXZ0J4LTh2bFdMd3xBQ3Jtc0tueEdkMnRrTU5SeXdwZkc1R1ZsVjdvbVhaTTFEem5XUlVGVlAyNEtxQllSR2FXYlMwY3lDN0MxTm5GUm1qb1RQeFUxVzVIZXNIdkVlSEdRNjU1ZVFmVDJHd1ItTkxxWjFjT2JYdFlxYWdoZEdXMFNFcw&q=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F37506&html_redirect=1
thank you it is really helpful !!! keep going
Thank you! :)
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!
Thanks for the great content!
🔥🔥🔥 Awesome topic.... waaaaaooo, It would be very helpful, if you start video playlist for Spartacus. ..:) You are a nice tutor .
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" 🙂
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 :)
Awesome content!
Good explanation! Really usefull content!
Great lesson! Thank you.
Is it possible to access the methods of the Host Component in the child component ?
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 :) ruclips.net/p/PLX7eV3JL9sfmJ6AaZj9eDlAKrJrEul4Vz
It was helpful, Thanks
Awesome content, thanks! U have a subscriber from Turkey now :P
Awesome, thank you! :D
Love your content,
Can you please make a video about “Strategy Patter” in Angular ?
We would love to see it
thanks man, interesting stuff, goes good with the cup of tea :)
спасибо! Рад, что видос зашел)
Great video! Thank You Dmytro ;)
Thank you 😊
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!
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 :)
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 ruclips.net/video/iBA2VLvqNr4/видео.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.
Hi!!! Is the best practice use setTimeout() or exist any recommendations? Thank you.
Hey Friend, it was really new learning for me... 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 :)
great !!!
Why do you have to bother with the token stuff? Can't you just use the Interface inside the ContentChild input?
Nice explanation of injection tokens)
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 :)
Great!!!
It was soooo useful
Glad to hear that 😊
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 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
Very good!
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 !!
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! :)
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 ?
Cool, thank you very much.
that's so cool. thanks
There is also another really cool use-case for actually the same pattern (but named differently). There we will dive a bit deeper ruclips.net/video/iBA2VLvqNr4/видео.html
nice example
very useful video
What if you had used the Widget interface as the @ContentChild parameter?
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?
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
Great video sir, you should be in Udemy!
Instead of wrapping calls in an if, you can just use optional chaining: this.weatherWidget?.refresh()
You are angular black belt 😊
At least somewhere I have reached it 😁
@@DecodedFrontend 😂
seriously, thank you for all these videos. it helps a lot others to progress. I will take your course on graphql soon. is there another way to support your work? paypal or other platform?
@@Nabulio85 Glad to hear that my videos help, Kevin! Yeah, I have a link on PayPal for those who would like to support the channel - bit.ly/donate-to-decoded-frontend
Much appreciate it :)