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.