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 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
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 ! 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.
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 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...
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 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.
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.
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)
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
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!
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 :)
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
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
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" 🙂
It is interestng that firstly wrapper try to find provider in child, not in itself. It is not obvious to me, but I guess that ContentChild decorator causes that the starting point of searching is child, not place where decorator was implemented.
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!
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"
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 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 😅
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 ?
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 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
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?
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
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 :)
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
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
This the kind of Angular content I want to see on youtube. Nice solution.
Thanks! More coming :)
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 😉
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!
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 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
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!
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
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 :)
Good job, Dmytro! Very actual problem and very good solution!
Learnt new things, thanks for explaining amazing concepts
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 !
Absolutely amazing. Thanks for this explanation 🚀
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 ;)
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 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...
Very useful stuff, thanks! Very well explained.
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!
This is just brilliant, I'm so happy I found your channel
Thanks, Taras!🙂
Wow...Super awesome technique. Thanks for sharing. 🎉
Thank you so much, I appreciate your efforts.
Thank you for this video and your channel!
Thanks! It was a perfect explanation, good job Dmytro 💪👍!!!
Great job! Awesome explanation and really good examples
Thank you very much, Nikita! 😊
Clear examples well explained. Thanks!
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!
Quite late to finding your videos but they are super useful - thank you!
Thank you a lot, Dmitro. Або просто щиро дякую :)
Будь ласка 😉
Great lesson! Thank you.
Amazing content man, keep going!
Thanks, will do!
Thanks for the great content!
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!
Excellent video. I finally understand something about tokens, and I learned something new about ContentChild (the `static: true` part)
thank you it is really helpful !!! keep going
Thank you! :)
simply a mind-blowing explanation boss.
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 :)
Thank you a lot i appreciate it !
🔥🔥🔥 Awesome topic.... waaaaaooo, It would be very helpful, if you start video playlist for Spartacus. ..:) You are a nice tutor .
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.
Thank you for explanation. Good example.
Thank you for the feedback! Glad you liked it :)
This is genius, thanks mate!
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!
Great Content, very useful
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 😉
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 😉
It was helpful, Thanks
Awesome content!
Good job man!!! Loved it
Thank you! 😉
thanks man, interesting stuff, goes good with the cup of tea :)
спасибо! Рад, что видос зашел)
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
Cool, thank you very much.
Nice and clear!
Thank you! :)
Great trick!
Amazing content. Keep going
Thanks a lot bro!
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!
Awesome content, thanks! U have a subscriber from Turkey now :P
Awesome, thank you! :D
Great video! Thank You Dmytro ;)
Thank you 😊
that's so cool. thanks
Awesome, thanks!
Thank you! :)
Hey Friend, it was really new learning for me... Thanks 🙏
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!
Love your content,
Can you please make a video about “Strategy Patter” in Angular ?
We would love to see it
Nice explanation of injection tokens)
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 explanation bro.
Thanks 🙏🏻
Great!!!
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
great !!!
It was soooo useful
Glad to hear that 😊
very useful video
Instead of wrapping calls in an if, you can just use optional chaining: this.weatherWidget?.refresh()
Great video sir, you should be in Udemy!
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
Exceptional... 🥇
Thank you very much! Glad you liked it
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 :)
nice example
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" 🙂
It is interestng that firstly wrapper try to find provider in child, not in itself. It is not obvious to me, but I guess that ContentChild decorator causes that the starting point of searching is child, not place where decorator was implemented.
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!
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!!! Is the best practice use setTimeout() or exist any recommendations? 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!
Is it possible to access the methods of the Host Component in the child component ?
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.
Why do you have to bother with the token stuff? Can't you just use the Interface inside the ContentChild input?
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 !!
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 ?
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 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.
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?
What if you had used the Widget interface as the @ContentChild parameter?
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
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 :)