🧩 Angular Design Patterns: Singleton, Observer & Decorator

When it comes to building scalable and maintainable Angular applications, understanding and applying the right design patterns can make a world of difference. In this two-part series, I’m breaking down some of the most impactful design patterns in Angular.

Let’s kick things off with the Singleton, Observer, and Decorator patterns—each deeply embedded in how Angular works behind the scenes.

---

1️⃣ Singleton Pattern

🔍 What It Is

The Singleton pattern ensures that a class has only one instance throughout the lifetime of your application.

🧠 Why It Matters

This is crucial for managing shared state or global functionality like logging, configuration, or caching.

🛠️ Angular in Action

In Angular, this pattern is implemented naturally using services provided in the root injector:

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string) {
    console.log(message);
  }
}

With providedIn: 'root', Angular ensures this service is instantiated once and shared across the entire app.

---

2️⃣ Observer Pattern

🔍 What It Is

The Observer pattern defines a one-to-many relationship where changes in one object automatically notify and update all its subscribers.

🧠 Why It Matters

Perfect for reactive programming, real-time updates, and event-driven architecture.

🛠️ Angular in Action

Angular uses the Observer pattern heavily with RxJS, especially for handling asynchronous data streams:

@Injectable({ providedIn: 'root' })
export class NotificationService {
  private messageSubject = new Subject<string>();
  message$ = this.messageSubject.asObservable();

  sendMessage(message: string) {
    this.messageSubject.next(message);
  }
}

Now, any component that subscribes to message$ gets notified whenever a new message is sent.

---

3️⃣ Decorator Pattern

🔍 What It Is

The Decorator pattern adds behavior or functionality to classes, properties, or methods dynamically, without modifying their core logic.

🧠 Why It Matters

It makes code more expressive, declarative, and easier to manage—especially for UI behaviors and metadata.

🛠️ Angular in Action

Angular uses decorators like @Component, @Directive, and @Injectable to attach metadata to classes:

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

The @Directive decorator registers this class as a custom directive, applying the highlight effect wherever it’s used.

---

✅ Wrapping Up

These three patterns—Singleton, Observer, and Decorator—form the foundation of many Angular features. Mastering them gives you a clearer picture of how Angular works under the hood and helps you write better, more maintainable code.

In Part 2, we’ll dive into more patterns including Factory, Strategy, and Facade, and how they apply to real-world Angular architecture.

---

📢 Have a favorite pattern you use in your Angular projects? Let’s discuss!
👀 Stay tuned for the next part of the series.

Let me know if you’d like this turned into a tweet thread or visuals for a slide deck!