Strategy Design Pattern in Angular

Strategy Pattern in AngularImplementing Strategy Pattern is easy in Angular when we have good basics“The essence of strategy is choosing what not to do.” — Michael E. PorterImplementing design patterns in practical is can be difficult. Recently I imple…

Strategy Pattern in Angular

Implementing Strategy Pattern is easy in Angular when we have good basics

Strategy Pattern in Angular
“The essence of strategy is choosing what not to do.” — Michael E. Porter

Implementing design patterns in practical is can be difficult. Recently I implemented a real use case of strategy pattern in Angular.

I was given a task of image file upload. I created a component and implemented as below:

Now the requirement changed. A flag was introduced and based on its value we will either compress the images or do not compress and then upload them.

A naive approach is to use simple branching like below:

This is what we currently see in the browser:

strategy pattern in angular
strategy-pattern-in-angular

You can see, it violated ‘Open Closed design principal’, which states that “a class should be Open for extension and Closed for modification.”

One more change in requirement would introduce switch statement and the component code would increase. Also compression code is not responsibility of component[Violation of Single Responsibility Principal]. This should be delegated to some other class.

Now this is perfect case to introduce the strategy pattern. On the change of switch in HTML, strategy should change dynamically and accordingly, processing of files must be done.

So we will modify our code as below:

  1. Create Strategy abstract class with abstract processFiles method
  2. Extend it to separate concrete strategy namely StrategyWithCompression and StrategyWithoutCompression
  3. Implement the method processFiles in concrete classes.
  4. In component make following changes.
  5. Inject injector in constructor.
  6. Delete processFiles and processCompressedFiles as this will be part of concrete classes.
  7. Set default strategy on ngOnInit
  8. Get strategy on toggle of switch from map.

Strategy Pattern implementation

Component code will look like as below:

You can find whole project on stackblitz on below link:

Thank you for reading this piece. I hope it has been useful!

I’ve created an Angular Course on Udemy which covers many practical problems and solutions in Angular. It could be a stepping stone in your professional Angular Journey. Please take a look.

Build with independent components for speed and scale

Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.

Bit offers a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →

An independently source-controlled and shared “card” component. On the right => its dependency graph, auto-generated by Bit.

Learn More


Strategy Design Pattern in Angular was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Pawan Kumawat | Sciencx (2024-03-29T00:48:39+00:00) » Strategy Design Pattern in Angular. Retrieved from https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/.
MLA
" » Strategy Design Pattern in Angular." Pawan Kumawat | Sciencx - Thursday March 10, 2022, https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/
HARVARD
Pawan Kumawat | Sciencx Thursday March 10, 2022 » Strategy Design Pattern in Angular., viewed 2024-03-29T00:48:39+00:00,<https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/>
VANCOUVER
Pawan Kumawat | Sciencx - » Strategy Design Pattern in Angular. [Internet]. [Accessed 2024-03-29T00:48:39+00:00]. Available from: https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/
CHICAGO
" » Strategy Design Pattern in Angular." Pawan Kumawat | Sciencx - Accessed 2024-03-29T00:48:39+00:00. https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/
IEEE
" » Strategy Design Pattern in Angular." Pawan Kumawat | Sciencx [Online]. Available: https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/. [Accessed: 2024-03-29T00:48:39+00:00]
rf:citation
» Strategy Design Pattern in Angular | Pawan Kumawat | Sciencx | https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/ | 2024-03-29T00:48:39+00:00
https://github.com/addpipe/simple-recorderjs-demo