Multi-provider pattern in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to provide multiple values for the same token using multi-provider.

Angular

providers: [{ provide: TOKEN, useValue: 'Value1', [1]: true }]

Drag options to blanks, or click blank then click option'

Amulti

BmultiUse

CmultiValue

DmultiProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'multiProvider' instead of 'multi'.

Omitting the multi property entirely.

Using 'multiValue' or 'multiUse' which are not valid.

The multi property set to true tells Angular this provider is part of a multi-provider array.

2fill in blank

medium

Complete the code to inject all providers registered under the multi-provider token.

Angular

constructor(@Inject(TOKEN) private [1]: string[]) {}

Drag options to blanks, or click blank then click option'

Avalue

BmultiValue

CmultiValues

Dvalues

Attempts:

3 left

💡 Hint

Common Mistakes

Using a singular name like 'value' which suggests a single item.

Using names not matching the injected type.

The injected parameter should be an array to receive all values from the multi-provider token. Naming it values is clear and common.

3fill in blank

hard

Fix the error in the multi-provider registration by completing the missing property.

Angular

providers: [
  { provide: TOKEN, useValue: 'Value1', [1]: true },
  { provide: TOKEN, useValue: 'Value2', [1]: true }
]

Drag options to blanks, or click blank then click option'

AmultiUse

BmultiProvider

Cmulti

DmultiValue

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'multi: true' only to one provider.

Using incorrect property names like 'multiProvider'.

Both providers must have multi: true to be part of the multi-provider array. Missing it causes Angular to override the first provider.

4fill in blank

hard

Fill both blanks to create a multi-provider that uses a factory function and marks it as multi.

Angular

providers: [{ provide: TOKEN, useFactory: [1], [2]: true }]

Drag options to blanks, or click blank then click option'

Amulti

BfactoryFunction

C() => 'FactoryValue'

DuseFactory

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a function for useFactory.

Forgetting to set multi to true.

The useFactory property needs a function, here a simple arrow function returning a string. The multi property must be true to mark it as a multi-provider.

5fill in blank

hard

Fill all three blanks to create a multi-provider with a factory, dependencies, and multi flag.

Angular

providers: [{ provide: TOKEN, useFactory: [1], deps: [[2]], [3]: true }]

Drag options to blanks, or click blank then click option'

A() => 'ValueFromFactory'

BHttpClient

Cmulti

DHttpHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect dependency names.

Omitting the multi property or setting it false.

The factory is a function returning a string. The deps array lists dependencies like HttpClient. The multi property set to true marks it as a multi-provider.

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