Multi-provider pattern in Angular

Introduction

The multi-provider pattern lets you register many services under the same token. Angular then gives you all of them as a list. This helps when you want to add features without changing existing code.

You want to add multiple logging services that all run together.

You have several data transformers and want to apply them all in order.

You want to register many validators for a form and run them all.

You want to provide multiple strategies for a feature and pick them dynamically.

You want to extend functionality by adding new providers without modifying the original provider.

Syntax

Angular

providers: [
  { provide: TOKEN, useClass: ServiceA, multi: true },
  { provide: TOKEN, useClass: ServiceB, multi: true }
]

Set multi: true to tell Angular this token has multiple providers.

Angular injects an array of all providers registered with that token.

Examples

This registers two logger services under the same token 'LOGGERS'. Injecting 'LOGGERS' gives an array of both loggers.

Angular

providers: [
  { provide: 'LOGGERS', useClass: ConsoleLogger, multi: true },
  { provide: 'LOGGERS', useClass: FileLogger, multi: true }
]

Angular's HTTP client uses this pattern to apply multiple interceptors in order.

Angular

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
]

Sample Program

This example shows two greeter services registered under the same token GREETERS using multi-provider. The component injects all greeters as an array and displays their greetings.

Angular

import { Component, Inject, Injectable, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';

const GREETERS = new InjectionToken<{greet(): string}>('GREETERS');

@Injectable()
class EnglishGreeter {
  greet() { return 'Hello'; }
}

@Injectable()
class SpanishGreeter {
  greet() { return 'Hola'; }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `<div *ngFor="let greeter of greeters">
               {{ greeter.greet() }}
             </div>`,
  providers: [
    { provide: GREETERS, useClass: EnglishGreeter, multi: true },
    { provide: GREETERS, useClass: SpanishGreeter, multi: true }
  ]
})
export class AppComponent {
  constructor(@Inject(GREETERS) public greeters: { greet(): string }[]) {}
}

Important Notes

Without multi: true, Angular would overwrite previous providers for the same token.

Use multi-providers to keep code modular and easily extendable.

Summary

Multi-provider pattern lets you register many providers under one token.

Angular injects an array of all providers registered with that token.

This pattern helps add features without changing existing code.

Practice

1. What does the Angular multi-provider pattern allow you to do?

easy

A. Inject services only once per application

B. Create multiple components with the same selector

C. Use multiple modules in one application

D. Register multiple providers under a single injection token

Solution

1. Step 1: Understand the multi-provider pattern concept

   The multi-provider pattern allows registering many providers under one token so Angular can inject all of them as an array.

2. Step 2: Compare options with the concept

   Only Register multiple providers under a single injection token correctly describes this ability. Other options describe unrelated Angular features.

3. Final Answer:

   Register multiple providers under a single injection token -> Option D

4. Quick Check:

   Multi-provider pattern = Register many providers under one token [OK]

Hint: Multi-provider means many providers for one token [OK]

Common Mistakes:

• Confusing multi-provider with multiple components
• Thinking it relates to modules instead of providers
• Assuming it limits injection to once

2. Which syntax correctly registers multiple providers using the multi-provider pattern in Angular?

easy

A. providers: [{ provide: TOKEN, useClass: ServiceA }, { provide: TOKEN, useClass: ServiceB }]

B. providers: [{ provide: TOKEN, useClass: ServiceA, multi: true }, { provide: TOKEN, useClass: ServiceB, multi: true }]

C. providers: [{ provide: TOKEN, useClass: ServiceA, multi: false }, { provide: TOKEN, useClass: ServiceB, multi: false }]

D. providers: [{ provide: TOKEN, useClass: ServiceA, multi: 'yes' }, { provide: TOKEN, useClass: ServiceB, multi: 'yes' }]

Solution

1. Step 1: Identify correct multi-provider syntax

   To register multiple providers under one token, each provider must have multi: true set.

2. Step 2: Check options for correct usage

   Only providers: [{ provide: TOKEN, useClass: ServiceA, multi: true }, { provide: TOKEN, useClass: ServiceB, multi: true }] sets multi: true for both providers. providers: [{ provide: TOKEN, useClass: ServiceA }, { provide: TOKEN, useClass: ServiceB }] misses multi, options with multi: false or invalid strings like 'yes' do not work.

3. Final Answer:

   providers: [{ provide: TOKEN, useClass: ServiceA, multi: true }, { provide: TOKEN, useClass: ServiceB, multi: true }] -> Option B

4. Quick Check:

   multi: true enables multi-provider registration [OK]

Hint: Always set multi: true for multi-provider registration [OK]

Common Mistakes:

• Omitting multi: true causes only last provider to register
• Setting multi: false disables multi-provider behavior
• Using string instead of boolean for multi

3. Given this Angular provider setup:

providers: [
  { provide: 'TOKEN', useValue: 'A', multi: true },
  { provide: 'TOKEN', useValue: 'B', multi: true }
]

What will Angular inject when you ask for inject('TOKEN')?

medium

A. An array ['A', 'B']

B. The string 'B'

C. An array ['B', 'A']

D. An error because of duplicate tokens

Solution

1. Step 1: Understand multi-provider injection behavior

   When multiple providers use the same token with multi: true, Angular injects an array of all values in registration order.

2. Step 2: Analyze given providers

   Providers register 'A' first, then 'B'. So injection returns ['A', 'B'].

3. Final Answer:

   An array ['A', 'B'] -> Option A

4. Quick Check:

   Multi-provider injects array of all registered values [OK]

Hint: Multi-provider injects array in registration order [OK]

Common Mistakes:

• Assuming only last provider is injected
• Thinking order is reversed
• Expecting a single value instead of array

4. What is wrong with this Angular multi-provider registration?

providers: [
  { provide: TOKEN, useClass: ServiceA },
  { provide: TOKEN, useClass: ServiceB, multi: true }
]

medium

A. useClass cannot be used with multi-provider pattern

B. multi: true cannot be mixed with providers without it

C. Missing multi: true on the first provider causes only ServiceA to be injected

D. TOKEN must be a string, not a variable

Solution

1. Step 1: Check multi flag consistency

   All providers for a multi-provider token must have multi: true. Missing it on one disables multi-provider behavior.

2. Step 2: Analyze given providers

   The first provider lacks multi: true, so Angular treats it as a single provider, overriding others. Only ServiceB with multi: true is ignored.

3. Final Answer:

   Missing multi: true on the first provider causes only ServiceA to be injected -> Option C

4. Quick Check:

   All multi providers must have multi: true [OK]

Hint: All multi providers need multi: true or injection breaks [OK]

Common Mistakes:

• Mixing multi: true and missing multi flags
• Thinking useClass is incompatible with multi
• Assuming token must be string literal

5. You want to add logging features to an Angular app without changing existing services. How can the multi-provider pattern help?

hard

A. Register multiple logging services under one token with multi: true, then inject all to run logs

B. Replace existing services with new ones using the same token without multi: true

C. Create a new module that imports all services separately

D. Use multi-provider pattern to inject only the first registered service

Solution

1. Step 1: Understand the goal

   You want to add logging features without changing existing services, so you need to add providers without replacing them.

2. Step 2: Apply multi-provider pattern

   Register multiple logging services under one token with multi: true. Angular injects all as an array, allowing combined logging without modifying existing code.

3. Final Answer:

   Register multiple logging services under one token with multi: true, then inject all to run logs -> Option A

4. Quick Check:

   Multi-provider adds features by injecting arrays of providers [OK]

Hint: Use multi: true to add features without replacing services [OK]

Common Mistakes:

• Replacing instead of adding providers
• Not using multi: true and losing existing providers
• Confusing multi-provider with module imports