Design Patterns in Angular Source Code - Bridge Design Pattern
Vložit
- čas přidán 27. 07. 2024
- 💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
Since I started investigating the source code of Angular, I found a few classical design patterns used to implement some framework features. In this video, I will share with you one of them used to design the Angular Forms package. In the first part of the video, you will learn what a Bridge design pattern is and how it was used in Angular Forms making them so flexible. I hope you will learn something new from this video and if you find this helpful video please share it with your colleagues.
🕒 Time Codes:
00:00:00 - Inro;
00:00:34 - What types of Angular Forms exist;
00:02:32 - How to become an Angular Forms expert?;
00:03:43 - Bridge Design Pattern overview;
00:10:51 - How Bridge Design Pattern is used in Angular Forms;
00:15:41 - Outro;
🙌 Support Dmytro bit.ly/donate-to-decoded-fron...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi - Jak na to + styl
NOTE⚠ I just realized this after publishing. At 08:58 I made a mistake/typo and implemented the PayPalProvider as an interface instead of the PaymentProvider interface. Typescript didn't catch that, so it was missed... Sorry for the inconvenience and thanks @brokolililer ad @dogandipcin who pointed out this mistake.
Leave your thoughts in the comments and follow me on other social media:
Advanced Angular Courses - courses.decodedfrontend.io/
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfron...
LinkedIn - www.linkedin.com/in/dmezhenskyi
Love these deep dives into the framework with theory like design patterns, this is where the real learning happens!
Great to hear! Thank you for your feedback:)
Please continue on covering Design Patterns on Angular. This is exactly what i am trying to do on my own, and you definelty help me to understand it better ! You are a game changer.Thank you!
Every Video this guy makes is a 10/10 ❤
Thank you :)
@@DecodedFrontend your welcome, BTW i would love to buy a course from you about NX, Storybook, Apps and Libs. Looking forward to it. 😃☺️
Thanks for letting me know :) Soon I am gonna start to work on it :)
@@MhmmDonuts Am with you on this.
@@DecodedFrontend Please do it.
God I wish someone could explain to me SOLID principles a year ago so clear as Dmytro did =)
;)
I looked this up years ago and had a hard time finding it. Very good explanations. If you take a course with these good practices I'm sure it would sell a lot
Thank you for the feedback:) I will keep in mind that 🙌
Every video on this channel is unique and useful. Thank you very much!
Thanks for another useful video, Dmytro
Another great video!
Thank u for ur content, watching with pleasure.
Great stuff as always. I recommend the forms course, because it's really worth it. super valuable material.
thanks for the design pattern series! very helpful
Great explanation, as usual!
The best Angular videos on the internet!
as always on top!
Amazing! I've been going around this pattern and can't quite figure out when to apply it and how, and after watching your video I got an epiphany! Thank you very much! Keep up the good work, looking forward to the next pattern videos! 🤩❤🙌
Great explanations, as usual !
Great video, thanks so much, I can imagine there was a lot of work behind the scenes.
Awesome coverage.
I love this tutorials!!! the design patters apply in real life
Love your content, really helped me to become a better angular developer, please don't stop :D ... if you are short with Angular content, I would also love to see multiple design patterns and maybe some problems and how you could solve them with different design patterns.
You are just awesome 10/10 ❤
Damn , your content is so awesome.
Thank you for the video. This was super helpful and informative.
Thanks, Dmytro!
You are welcome:)
remarkable video. thanks!
Glad you liked it! :)
As usual superb 👍👏... Thanks for sharing this 🙏
You are welcome 😊
as usual awesome tutorial)
Thanks, Yurii ;)
This was a good video.
Thx for this useful video !!!!
Thanks for your feedback! I am glad to hear that you find it useful 😊
Dear Dmytro, thank you very much.
You are welcome! Thanks for your feedback 😊
You are the best!
Thanks :) Glad you like my content
hey, I loved this video, great job. Small question tho: how does this expanation correspond to your other video about the Bridge Pattern? Are these different patterns?
Correct me if I'm wrong, but I really have the impression that the bridge patern is a kind of composition. FormControlDirective uses ControlValueAccessor to synchronize with DOM
I think it would be more accurate to say that “the Bridge pattern leverages the composition”. The composition isn't a pattern by itself, it is just a form of relationship between entities, which is utilized by many other design patterns like bridge, strategy, dependency injection, etc Composition is a more generic thing that is used by design patterns to solve more narrow use cases. So, your impression is partly right :)
👍👍👍👍👍
Wow, Awesome🎉 Do you have any Udemy Course, on Angular Project using Cool concepts like this ?
❤️💯
Could you explain me the differents between strategy and bridge pattern
Hi, great videos.
I have a small question though...
I am trying to implement the bridge pattern as aou describe it for a dashboard with widgets, which works great until i dynamically create the widgets.
From then on i cannot get them through the "ContentChild" slector
tried creating them in different ways (viewcontainerref, ngComponentOutput, ...) but it seems that dynamically creted coponents and contenchild do not match
ran across a couple of people who said that contentchild only works for stuff that can be determined at compile time
do you know of a way to use the bridge pattern with dynmic omponents?
Is there a bug on shared.ts file???? (16:46)
.setDisabledState?.(control.disabled)
The point after setDisabledState? (.)
Hello Dymitry,
Awesome video thanks for the detailed explanation. I just have a question.
Don't understand one part of the implementation of the bridge pattern. Why do you implement PayPalProvider class to PayPalProvider and ApplePayProvider classes?
Hi! I just realised that after publishing that I made a typo. Of course it had to be PaymentProvider interface and because API of PaymentProvider and PayPalProvider basically the same, the TypeScript did't complain about that... :(
@@DecodedFrontend Yes, I thought that like that way. However, the behavior of the typescript here is interesting. Yes, PaymentProvider and PayPalProvider basically the same, but I wish TypeScript would at least understand that we are implementing the same class for the PayPalProvider implementation :)
@dogandipcin yeah... To be honest, I still don't get the motivation to allow "implement" anything like classes in TypeScript :)
@@DecodedFrontend 😃
Hi, Shouldn't we implement "PaymentProvider" in the 9th minute?
We implemented "PaypalProvider" to "ApplePayProvider". Why ? :(
Oh, it looks like I typed PayPalProvider by mistake and it wasn't caught by the typescript. Yes, you are right! It had to be a PaymentProvider interface of course 🤦Thanks for reporting that
Гарні відео, приємно дізнатися, що це ще й твій співвітчизник🇺🇦
Слава Україні!
Героям слава🇺🇦 дякую за фідбек 🙌🏻