Design Patterns in Angular Source Code - Strategy Design Pattern

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DecodedFrontend/
The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Today I continue a video series where I try to reveal classical GoF design patterns in Angular source code. In the previous video we learned how Design Pattern Bridge is used to Design the Angular forms library and today I am going to talk about the Strategy Design pattern and how it was used to design the ASYNC pipe in Angular. Enjoy the video and I hope you will learn something new today.
🕒 Time Codes:
00:00:00 - Intro;
00:01:03 - Which problems Strategy solves;
00:02:08 - Ad integration;
00:03:43 - Strategy pattern in Action;
00:07:22 - How it is used in ASYNC pipe code;
00:11:46 - Outro;
💥 Become a PRO in Angular with my Courses💥
🔗 courses.decodedfrontend.io
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
This video was sponsored by Brilliant

[@DecodedFrontend]

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DecodedFrontend/. The first 200 of you will get 20% off Brilliant’s annual premium subscription.

[@bromptonhorsing8597]

Hello, Dmytro! Would you be interested to make a video about contentChild/Children? Not how it works, but where are appropriate applications in terms of frontend abstractions? What business use case are they best for?
Thanks!

[@felipejacobs2296]

great video and especially the cat that takes center stage at the beginning 😅

[@kanishkanaik2784]

Need all the design pattern in angular

[@magdalenalewicka7197]

It's so easy to find videos on basic Angular concepts, but so difficult to find ones that go deeper. I love your videos, they help pretty experienced developer to get better and better. Thank you for sharing your knowledge.

[@dale_nguyen]

Great video. We need more screen time for the cat though 🤣

[@DecodedFrontend]

Your required was accepted 😁

[@zhdanvadim9536]

Thanks. Great explanation!

[@oleksandrvorovchenko8674]

Thanks. Great explanation as usual!

[@giorgikirvalidze394]

hi, thx for informative videos, please upload more about design patterns.

[@GLawSomnia]

Simple, yet effective :D Love your videos

[@carlosabud]

these videos are freaking amazing, Dmytro! please keep it up!!

[@praktycznewskazowki6733]

Very good series, Thanks! :)

[@hubert.t4243]

Again, as usual well explained.Thank you.

[@MohamedAbdulRaouf]

Brilliant as always, thank you 🙏🙏

[@cdc_ua]

thanx for your great job!

[@foobar846]

Great vídeo! Thank you!

[@yuliakhitrukhina]

Last two videos are sooo good! Please, continue this series about patterns with examples from the source code (if there are some :)))
Btw, really enjoying the Forms course, thanks!

[@emanuelzhupa]

Thanks, very great example, made me grasp the concept much easier.
Can you please do more videos revealing angular internals, and how they work

[@avijitghosh9472]

Just awesome. Always learning new things in details from your videos.

[@demidovmaxim1008]

Thanks for this video dear friend!)

[@obadaka3918]

Thanks a lot😃

[@kiransaravade5127]

great video

[@leandroalvarez9075]

Hi! You are the best. Thanks for your videos. Could be some about unit testing? or testing in angular? Thanks you!

[@evtihii]

Cool pretty useful

[@denns0r]

Wow that simple example was very helpful!! Great explanation. 👏

[@DecodedFrontend]

Glad that I could make this topic clearer ;)

[@ytamb01]

I have switch statements in my code that determine behaviour and now I know how to manage this. Thanks very much.

[@DecodedFrontend]

Use it wisely. Not every switch/case has to be refactored like in the video. Sometimes it might bring unnecessary complexity to your code without real benefits

[@THIAGO_6721]

Amazing

[@GankMe57]

Very good video as always ! ❤️

[@DecodedFrontend]

Thank you! 😃

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro)

[@DecodedFrontend]

My pleasure!

[@ievgensvichkar2643]

Nice example of the strategy pattern. I would like to mention one more example of this pattern in JS world - ability to provide the comparison algorithm to the sort method of Array. The idea is the same - runtime definition of the algorithm that is used inside the main context.

[@deathbyjs]

Thanks

[@DecodedFrontend]

Wow, thank you so much!🙌🏻

[@ico0z]

Why there isn't a love button. This video e just perfect and you learn a lot from it. Thank you

[@yuriinadilnyi3029]

I always learn a lot of new things from your videos)

[@DecodedFrontend]

Glad to hear that, Yurii :) Thanks for the feedback!

[@atmn_pawel]

creator of the nest js in the background 0:10

[@DecodedFrontend]

Haha :) Exactly!

[@santicanabalramos667]

I love this kind of videos :D

[@DecodedFrontend]

Awesome! Thanks for the feedback ;)

[@AzadKanwar]

awesome

[@aditshah3077]

Hello Dmytro, Can you please make a video about change detection in depth understanding with real time scenarios and usage? It would be better for us if you make it. Thanks in advance 🙏

[@Mr007Zeta]

Instant like. Love your content

[@DecodedFrontend]

Thank you 😊

[@beodan9219]

awsome

[@AlphaFrog1021]

great video! I suggest turning off minimap and even sidebar to have more screen size

[@DecodedFrontend]

Good hint, actually! Thank you 😊

[@christ-gospel]

Thanks. Pls explain how to understand the angular code.

[@pavan8268]

Hi Decoded Frontend, Is there any way to add open graph tags on angular, if it's rendered client side? Any suggestions would be great!!

[@nicohussein2635]

Wow, amazing video!! 🚀
Which resources do u recommend to learn/practice more about design patterns?

[@DecodedFrontend]

refactoring.guru - is an awesome source to read more about it

[@rezyadlf]

Hi Dmytro. Could you, please, teach us micro-frontend. Especially, angular/module-federation? That would be cool. You're an expert in Angular and i'm sure your video about it will be very usefull

[@rezyadlf]

Also, since you are highly expertised, could you share us with your vision about the future of Angular? Will it reach the performance of React some day? What are they (Google) going to improve in future etc. I've read in Twitter that they are thinking about implementation of some sort of JSX-like syntax, maybe you know something interesting

[@rezyadlf]

Curretnly, people are hyped on Angular's Signal. Would be cool to hear about that.

[@irynakhariv5419]

Дякую😊

[@DecodedFrontend]

Дуже дякую за фідбек 😊

[@devman5813]

Can you add the video to playlist about design patterns? :D

[@DecodedFrontend]

But it should be already there… 🤔 ok, I will check one more time

[@devman5813]

I can see it now, thank you :)

[@gund_ua]

Awesome stuff!
SOLID and Design Patterns are 2 topics that are very underrated and even sometimes hated in frontend world (LOL).
Very nice to see more attention on this stuff as in my opinion it's one of the most important things in most if not any software project (be it frontend or backend).
You can easily replace algorithms if you have a good architecture but if you don't then you will be spending countless hours refactoring =)

[@DecodedFrontend]

Thank you for your feedback, Alex! Always reach and valuable feedback. I am agree that knowledge about design principles and patterns can drastically improve the code we write. Also, very often they just sound scary and difficult but in reality it is not :)

[@Utopy34]

In 10 years working for enterprise clients with Angular I've never seen true OOP patterns employed on the front-end. It's always Functional Reactive Programming and classes are only used for Angular directives, pipes or services. You don't have a Product class but a product object that is stored in Redux for example. If you start mixing code paradigms you will break the codebase coherency which will do more harm than good. We generally try to reduce the cognitive complexity, not increase it.

[@piotrbrokowski4703]

Did you change the flat ?

[@DecodedFrontend]

No, I changed a room :)

[@MrKOHKyPEHT]

9:48 rows 110, 111, 112, 113 - is that how overload implemented in TS?

[@DecodedFrontend]

Yes, exactly

[@haroldpepete]

CEO was checking the class and how was the last feature you were assigned, he looks angry

[@DecodedFrontend]

Yeah, I probably forgot to food her, so that's why she looks angry :D

[@chandreshmaurya1021]

I see u fixed the thumbnail 😉

[@DecodedFrontend]

Yes :)

[@Aliakbaresmaeiliiii]

thanx for your great job!