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.