Multi-provider pattern in Angular - Step-by-Step Execution

Concept Flow - Multi-provider pattern

Define Interface or Token

↓

Create Multiple Providers

↓

Provide in Component or Module

↓

Inject as Array

↓

Use All Providers Together

↓

Component Behavior with Multiple Implementations

This flow shows how Angular uses multiple providers for the same token, injects them as an array, and uses all implementations together.

Execution Sample

Angular

const LOGGING = new InjectionToken<Logger>('LOGGING');

@Component({
  providers: [
    { provide: LOGGING, useClass: ConsoleLogger, multi: true },
    { provide: LOGGING, useClass: FileLogger, multi: true }
  ]
})
export class AppComponent {
  constructor(@Inject(LOGGING) private loggers: Logger[]) {}
}

This code defines a multi-provider token LOGGING with two classes, then injects all implementations as an array.

Execution Table

Step	Action	Providers Registered	Injection Result	Component Behavior
1	Define InjectionToken LOGGING	None yet	N/A	N/A
2	Register ConsoleLogger with multi: true	LOGGING: [ConsoleLogger]	N/A	N/A
3	Register FileLogger with multi: true	LOGGING: [ConsoleLogger, FileLogger]	N/A	N/A
4	Inject LOGGING in AppComponent constructor	LOGGING: [ConsoleLogger, FileLogger]	Array of 2 logger instances	Component has both loggers available
5	Call loggers to log message	N/A	N/A	Message logged by ConsoleLogger and FileLogger
6	Component uses all providers	N/A	N/A	Combined behavior from multiple providers
7	End of injection and usage	N/A	N/A	Multi-provider pattern complete

💡 Injection completes when all multi providers are collected into an array and used.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
LOGGING Providers	[]	[ConsoleLogger]	[ConsoleLogger, FileLogger]	[ConsoleLogger, FileLogger]	[ConsoleLogger, FileLogger]
Injected loggers	undefined	undefined	undefined	[ConsoleLogger instance, FileLogger instance]	[ConsoleLogger instance, FileLogger instance]

Key Moments - 3 Insights

Why do we get an array of providers instead of just one instance?

Because each provider is registered with multi: true, Angular collects all providers for the token into an array, as shown in execution_table step 4.

What happens if we forget multi: true on one provider?

Angular will override previous providers for that token instead of adding to the array, so only one provider will be injected. This is why multi: true is essential, as seen in steps 2 and 3.

How does the component use multiple providers together?

The component receives an array of all providers and can loop or call each one, combining their behavior, as shown in execution_table steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what is injected into the component constructor?

A Only the ConsoleLogger instance

B An array of two logger instances

C Only the FileLogger instance

D No providers injected

💡 Hint

Check the 'Injection Result' column at step 4 in execution_table.

At which step does Angular register the second provider for LOGGING?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Providers Registered' column to see when FileLogger is added.

If we remove multi: true from the FileLogger provider, what changes in variable_tracker?

A LOGGING Providers will only have FileLogger after step 3

B LOGGING Providers will have both ConsoleLogger and FileLogger

C Injected loggers will be an empty array

D Injected loggers will be undefined

💡 Hint

Refer to key_moments about multi: true importance and variable_tracker LOGGING Providers row.

Concept Snapshot

Multi-provider pattern in Angular:
- Use multi: true in provider config to register multiple providers for one token.
- Angular injects all providers as an array.
- Inject with @Inject(token) private var: Type[]
- Use all implementations together in component.
- Forgetting multi: true overrides previous providers.

Full Transcript

The multi-provider pattern in Angular allows registering multiple providers for the same token by setting multi: true. Angular collects these providers into an array and injects them together. This lets components use multiple implementations of a service or interface at once. The flow starts by defining an InjectionToken, then registering multiple providers with multi: true. When injected, Angular provides an array of all registered providers. This pattern is useful for combining behaviors or extending functionality. Key points include always using multi: true to avoid overriding providers and injecting as an array to access all implementations. The example shows two logger classes registered and injected as an array, then used together in a component.

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