Skip to content

MohamedElshahat55/Factory-design-pattern-in-angular

Repository files navigation

🚀 Benefits of the Factory Design Pattern in Angular

When building large-scale applications in Angular, managing object creation efficiently is crucial. The Factory Design Pattern provides a structured way to instantiate objects, reducing redundancy, improving maintainability, and enhancing scalability.


🎯 Why Use the Factory Pattern in Angular?

✅ 1. Encapsulates Object Creation

Instead of instantiating objects manually across components, the Factory Pattern centralizes the creation logic in a dedicated service.

🔹 Without Factory Pattern:

const product = new SmartphoneProduct(1, 'iPhone 13', 999, 'smartphones');'

🔹 With Factory Pattern:

const product = productFactory.createProduct(data);

✔ This improves code organization

✅ 2. Improves Maintainability

In an evolving Angular application, requirements change. With a Factory Pattern, you modify only one place (the factory service) when adding new object types.

🔹 Without Factory Pattern:

You would need to modify everywhere products are created.

🔹 With Factory Pattern:

You only update ProductFactoryService.

✅ 3. Reduces *ngIf Complexity in Templates

Without a factory, developers tend to add multiple *ngIf conditions to handle different object types.

🔹 Before (Using *ngIf in HTML):

<p *ngIf="product.category === 'smartphones'">Final Price: {{ product.price * 1.1 }}</p>
<p *ngIf="product.category === 'laptops'">Final Price: {{ product.price * 0.9 }}</p>

After (Using Factory Pattern in TS file):

calculateFinalPrice() {
  return this.product.calculateFinalPrice();
}

✔ This makes the template clean and easy to manage.

✅ 4. Supports Open/Closed Principle (OCP)

“Open for extension, closed for modification.”
The Factory Pattern allows adding new types of objects without modifying existing logic.

Example:

Instead of modifying multiple files, you just add a new class.

case 'tablets':
  return new TabletProduct(data.id, data.title, data.price, data.category);

🚀 Conclusion

The Factory Design Pattern in Angular helps in: ✔ Encapsulating object creation
Reducing *ngIf complexity in templates
Following SOLID principles
Enhancing maintainability and testability

By adopting the Factory Pattern, your Angular app becomes more scalable, modular, and easier to maintain! 🚀

📌 Example: Simple Angular Factory Pattern

Product Factory Service (product-factory.service.ts)

import { Injectable } from "@angular/core";
import { SmartphoneProduct } from "../models/smartphone-product";
import { LaptopProduct } from "../models/laptop-product";
import { Product } from "../models/product";

@Injectable({
  providedIn: "root",
})
export class ProductFactoryService {
  createProduct(data: any): Product {
    switch (data.category) {
      case "smartphones":
        return new SmartphoneProduct(data.id, data.title, data.price, data.category);
      case "laptops":
        return new LaptopProduct(data.id, data.title, data.price, data.category);
      default:
        throw new Error(`Unknown product category: ${data.category}`);
    }
  }
}

📌 connect with me on LinkedIn for more technical updates and content

About

Benefits of the Factory Design Pattern in Angular

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •