Design Patterns in Angular Source Code - Bridge Design Pattern

💥 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

[@DecodedFrontend]

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

[@MhmmDonuts]

Every Video this guy makes is a 10/10 ❤

[@DecodedFrontend]

Thank you :)

[@MhmmDonuts]

@@DecodedFrontend your welcome, BTW i would love to buy a course from you about NX, Storybook, Apps and Libs. Looking forward to it. 😃☺️

[@DecodedFrontend]

Thanks for letting me know :) Soon I am gonna start to work on it :)

[@yuusource2275]

@@MhmmDonuts Am with you on this.

[@yuusource2275]

@@DecodedFrontend Please do it.

[@invictuz4803]

Love these deep dives into the framework with theory like design patterns, this is where the real learning happens!

[@DecodedFrontend]

Great to hear! Thank you for your feedback:)

[@pierre-louis2711]

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!

[@guilhermelucas6223]

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

[@DecodedFrontend]

Thank you for the feedback:) I will keep in mind that 🙌

[@MrKOHKyPEHT]

God I wish someone could explain to me SOLID principles a year ago so clear as Dmytro did =)

[@DecodedFrontend]

;)

[@sanketjain7788]

The best Angular videos on the internet!

[@oleksandrvorovchenko8674]

Great explanation, as usual!

[@tangocukedi1]

thanks for the design pattern series! very helpful

[@ScareCrow4018]

Another great video! Thank u for ur content, watching with pleasure.

[@Nabulio85]

Great explanations, as usual !

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro

[@demidovmaxim1008]

Every video on this channel is unique and useful. Thank you very much!

[@marcink9954]

Great stuff as always. I recommend the forms course, because it's really worth it. super valuable material.

[@Doktornikita]

as always on top!

[@pointlesspos8440]

Awesome coverage.

[@v_korol]

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! 🤩❤🙌

[@ATTI0822]

remarkable video. thanks!

[@DecodedFrontend]

Glad you liked it! :)

[@jamesevans6438]

Great video, thanks so much, I can imagine there was a lot of work behind the scenes.

[@AntonioSantana-ll8il]

I love this tutorials!!! the design patters apply in real life

[@pwrDolphin]

Thanks, Dmytro!

[@DecodedFrontend]

You are welcome:)

[@yaibanoutsukushii]

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?

[@hubert.t4243]

You are just awesome 10/10 ❤

[@yuusource2275]

You are the best!

[@DecodedFrontend]

Thanks :) Glad you like my content

[@Brumry]

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.

[@nanasarathi]

As usual superb 👍👏... Thanks for sharing this 🙏

[@DecodedFrontend]

You are welcome 😊

[@yuriinadilnyi3029]

as usual awesome tutorial)

[@DecodedFrontend]

Thanks, Yurii ;)

[@armenbabayan1458]

Dear Dmytro, thank you very much.

[@DecodedFrontend]

You are welcome! Thanks for your feedback 😊

[@sebastienbruno5565]

Thx for this useful video !!!!

[@DecodedFrontend]

Thanks for your feedback! I am glad to hear that you find it useful 😊

[@BrockFredin]

This was a good video.

[@pemessh]

Damn , your content is so awesome. Thank you for the video. This was super helpful and informative.

[@faizouaremou9291]

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

[@DecodedFrontend]

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 :)

[@user-lb6dc6ci5w]

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?

[@AntonioSantana-ll8il]

Could you explain me the differents between strategy and bridge pattern

[@sergiocorrenti]

Is there a bug on shared.ts file???? (16:46) .setDisabledState?.(control.disabled) The point after setDisabledState? (.)

[@ishumishra8104]

Wow, Awesome🎉 Do you have any Udemy Course, on Angular Project using Cool concepts like this ?

[@user-sl3zf9ux4d]

👍👍👍👍👍

[@khumozin]

❤️💯

[@dogandipcin]

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?

[@DecodedFrontend]

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... :(

[@dogandipcin]

​@@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 :)

[@DecodedFrontend]

@dogandipcin yeah... To be honest, I still don't get the motivation to allow "implement" anything like classes in TypeScript :)

[@dogandipcin]

@@DecodedFrontend 😃

[@brokolililer]

Hi, Shouldn't we implement "PaymentProvider" in the 9th minute? We implemented "PaypalProvider" to "ApplePayProvider". Why ? :(

[@DecodedFrontend]

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

[@dontForgetDontForgive]

Гарні відео, приємно дізнатися, що це ще й твій співвітчизник🇺🇦 Слава Україні!

[@DecodedFrontend]

Героям слава🇺🇦 дякую за фідбек 🙌🏻