Explain Service Composition Patterns in Angular

37 / 100

Servicesintermediate

Service Composition Patterns

Explain how to compose smaller, focused services together rather than building large, monolithic services.

As an Angular application grows, there's a strong temptation to let one service accumulate more and more responsibilities — fetching data, caching it, transforming it, tracking loading state, handling errors — until it becomes a 500-line class that's hard to test and hard to reason about. Service composition is the discipline of instead building several small, focused services, each injectable independently, and having a higher-level service (or component) coordinate them by injecting each one it needs.

It's like a restaurant's expediter who coordinates between the grill station, the salad station, and the dessert station — the customer just talks to one person (the facade) who assembles the full order from several focused specialists working behind the scenes.

Key Concepts

This mirrors the single-responsibility principle from general object-oriented design, but DI makes it especially natural in Angular: because services are just injectable classes, a ProductFacadeService can inject a ProductApiService (pure HTTP calls), a ProductCacheService (in-memory caching), and a ProductMapperService (DTO-to-view-model transformation), composing them without any of them needing to know about each other directly.

ProductFacadeServiceProductApiServiceProductCacheServiceProductMapperService

The interview-relevant benefit is testability: each small service can be unit tested in complete isolation with trivial mocks, whereas a single monolithic service doing everything requires an elaborate test setup mocking HttpClient while also verifying caching logic and transformation logic all in the same test file, often leading to brittle, overly broad tests.

HttpClient

A facade service (sometimes literally named XyzFacadeService) is a particularly common composition pattern worth naming directly in an interview: it exposes a simplified, purpose-built API to components while internally coordinating multiple smaller services, giving components a single dependency to inject instead of three or four, without sacrificing the internal separation of concerns.

XyzFacadeService