Angular Design Patterns - Bridge [Advanced, 2020]
VloĆŸit
- Äas pĆidĂĄn 27. 07. 2024
- đ„ Learn how to build custom form controls like select dropdown with multiselection in my new advanced Angular Forms course bit.ly/advanced-angular-forms đ„
âïžUse coupon CZcams_DISCOUNT to get a 10%-off discountâïž
In todayâs advanced tutorial we will start with Angular design patterns and in particular - the "Bridge" pattern. This pattern might be very useful in some particular cases especially when you have some group of components that might have the same API but very different implementations. Besides this, we will touch such intersecting topics like content projection, ContentChild decorator, and the use of InjectionToken and DI. It will allow us to build a nice abstraction layer that allows us to interact with child components without knowing exactly about their type and to resolve them dynamically. Share this video with your colleagues if you find this video useful. Thank you for your attention and enjoy watching :)
đ Time codes:
00:00:00 - Intro;
00:00:35 - My annoying talking ends here ;)
More videos about Angular Material Library:
âą Angular Material
More videos about Angular Material CDK:
âą Angular Material CDK
đ Links:
Link to Github repo:
github.com/DMezhenskyi/angula...
#webdevelopment #angularmaterial #typescript - VÄda a technologie
![Control Value Accessor in Angular [Advanced, 2020]](http://i.ytimg.com/vi/OrmIfW8Ak3w/mqdefault.jpg)
![Control Value Accessor in Angular [Advanced, 2020]](/img/tr.png)
After a long time, I have seen a serious angular CZcamsr 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 CZcamsr 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 :)
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!
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 đ
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!
soooo useful to me .I really need to advanced level concepts so i can level my understand up of Angular .. Thank you
Just bought one of your courses after watching this videođ
Thank you for your support! I hope you will like it!
Learnt new things, thanks for explaining amazing concepts
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!
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 :)
Absolutely amazing. Thanks for this explanation đ
Very useful stuff, thanks! Very well explained.
Good job, Dmytro! Very actual problem and very good solution!
Wow...Super awesome technique. Thanks for sharing. đ
thankyou for your videos. i always look forward to your videos !
Great job! Awesome explanation and really good examples
Thank you very much, Nikita! đ
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...
Thanks! It was a perfect explanation, good job Dmytro đȘđ!!!
This is just brilliant, I'm so happy I found your channel
Thanks, Taras!đ
Thank you a lot, Dmitro. ĐĐ±ĐŸ ĐżŃĐŸŃŃĐŸ ŃĐžŃĐŸ ĐŽŃĐșŃŃ :)
ĐŃĐŽŃ Đ»Đ°ŃĐșĐ° đ
Clear examples well explained. Thanks!
Amazing content man, keep going!
Thanks, will do!
Thank you for this video and your channel!
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!
Thank you so much, I appreciate your efforts.
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 it is really helpful !!! keep going
Thank you! :)
Quite late to finding your videos but they are super useful - thank you!
Great lesson! Thank you.
Thank you for explanation. Good example.
Thank you for the feedback! Glad you liked it :)
simply a mind-blowing explanation boss.
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!
Thanks for the great 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!
Good job man!!! Loved it
Thank you! đ
Awesome 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!
Great Content, very useful
Nice and clear!
Thank you! :)
Excellent video. I finally understand something about tokens, and I learned something new about ContentChild (the `static: true` part)
This is genius, thanks mate!
It was helpful, Thanks
thanks man, interesting stuff, goes good with the cup of tea :)
ŃпаŃĐžĐ±ĐŸ! Đ Đ°ĐŽ, ŃŃĐŸ ĐČĐžĐŽĐŸŃ Đ·Đ°ŃДл)
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!
Amazing content. Keep going
Thank you a lot i appreciate it !
Great video! Thank You Dmytro ;)
Thank you đ
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.
Great trick!
Thanks a lot bro!
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 đ
Awesome, thanks!
Thank you! :)
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 đ
Awesome content, thanks! U have a subscriber from Turkey now :P
Awesome, thank you! :D
Cool, thank you very much.
Hey Friend, it was really new learning for me... 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
that's so cool. thanks
đ„đ„đ„ Awesome topic.... waaaaaooo, It would be very helpful, if you start video playlist for Spartacus. ..:) You are a nice tutor .
Great explanation bro.
Thanks đđ»
Nice explanation of injection tokens)
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!
There is also another really cool use-case for actually the same pattern (but named differently). There we will dive a bit deeper czcams.com/video/iBA2VLvqNr4/video.html
Exceptional... đ„
Thank you very much! Glad you liked it
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!
very useful video
great !!!
Great!!!
Love your content,
Can you please make a video about âStrategy Patterâ in Angular ?
We would love to see it
nice example
It was soooo useful
Glad to hear that đ
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 :)
Great video sir, you should be in Udemy!
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 :)
Instead of wrapping calls in an if, you can just use optional chaining: this.weatherWidget?.refresh()
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: czcams.com/users/redirect?event=comments&redir_token=QUFFLUhqa1RybHJrYmE3dzZFcC1EbFVXZ0J4LTh2bFdMd3xBQ3Jtc0tueEdkMnRrTU5SeXdwZkc1R1ZsVjdvbVhaTTFEem5XUlVGVlAyNEtxQllSR2FXYlMwY3lDN0MxTm5GUm1qb1RQeFUxVzVIZXNIdkVlSEdRNjU1ZVFmVDJHd1ItTkxxWjFjT2JYdFlxYWdoZEdXMFNFcw&q=https%3A%2F%2Fgithub.com%2Fangular%2Fangular%2Fpull%2F37506&html_redirect=1
đ„đ„đ„I just released one of the most advanced courses about Angular Forms. Check it out: bit.ly/advanced-angular-forms đUse coupon code CZcams_DISCOUNT to get a 15%-off discount
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 :)
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!
Hi!!! Is the best practice use setTimeout() or exist any recommendations? 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 czcams.com/video/iBA2VLvqNr4/video.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 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" đ
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 :) czcams.com/play/PLX7eV3JL9sfmJ6AaZj9eDlAKrJrEul4Vz.html
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.
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.
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 :)
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 ?
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?
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!
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 :)
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 !!
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
Wow
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