This content originally appeared on Bits and Pieces - Medium and was authored by Pawan Kumawat
Strategy Pattern in Angular
Implementing Strategy Pattern is easy in Angular when we have good basics
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:
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:
- Create Strategy abstract class with abstract processFiles method
- Extend it to separate concrete strategy namely StrategyWithCompression and StrategyWithoutCompression
- Implement the method processFiles in concrete classes.
- In component make following changes.
- Inject injector in constructor.
- Delete processFiles and processCompressedFiles as this will be part of concrete classes.
- Set default strategy on ngOnInit
- 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 →
Learn More
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- The Composable Enterprise: A Guide
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.
This content originally appeared on Bits and Pieces - Medium and was authored by Pawan Kumawat
Pawan Kumawat | Sciencx (2022-03-10T09:07:54+00:00) Strategy Design Pattern in Angular. Retrieved from https://www.scien.cx/2022/03/10/strategy-design-pattern-in-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.