Multi-provider pattern in Angular - Mini Project: Build & Apply

Using Multi-provider Pattern in Angular

📖 Scenario: You are building a simple Angular app that needs to provide multiple greeting messages from different sources. You want to use Angular's multi-provider pattern to register multiple greeting services and display all greetings in a component.

🎯 Goal: Create an Angular standalone component that uses the multi-provider pattern to inject multiple greeting messages and display them in a list.

📋 What You'll Learn

Create a token called GREETING_TOKEN for injection.

Provide three greeting messages using multi-providers with GREETING_TOKEN.

Inject all greetings into a component using @Inject(GREETING_TOKEN) and readonly greetings: string[].

Display all greetings in an unordered list (<ul>) in the component template.

💡 Why This Matters

🌍 Real World

Multi-provider pattern is useful when you want to register multiple values or services under the same token, such as plugins, configuration options, or messages, and inject them all together.

💼 Career

Understanding multi-providers helps you build modular and extensible Angular applications, a common requirement in professional frontend development.

1

Create the injection token GREETING_TOKEN

Create an Angular injection token called GREETING_TOKEN using inject() from @angular/core with type string[]. This token will be used to provide multiple greeting messages.

Angular

// Create the injection token GREETING_TOKEN here
// Your code here

Hint

Use new InjectionToken<string[]>('GREETING_TOKEN') to create the token.

2

Provide three greeting messages using multi-providers

Create an array called greetingProviders that provides three greeting strings: 'Hello', 'Hi', and 'Welcome' using the GREETING_TOKEN with multi: true.

Angular

import { InjectionToken } from '@angular/core';

export const GREETING_TOKEN = new InjectionToken('GREETING_TOKEN');

// Provide greeting messages using multi-providers
// Your code here

Hint

Use multi: true in each provider object to register multiple values for the same token.

3

Create a standalone component that injects all greetings

Create a standalone Angular component called GreetingListComponent. Inject all greetings using @Inject(GREETING_TOKEN) and a readonly property greetings: string[]. Use the greetingProviders array in the component's providers array.

Angular

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

export const GREETING_TOKEN = new InjectionToken('GREETING_TOKEN');

export const greetingProviders = [
  { provide: GREETING_TOKEN, useValue: 'Hello', multi: true },
  { provide: GREETING_TOKEN, useValue: 'Hi', multi: true },
  { provide: GREETING_TOKEN, useValue: 'Welcome', multi: true }
];

// Create GreetingListComponent that injects greetings
// Your code here

Hint

Use @Inject(GREETING_TOKEN) in the constructor to get all greetings as an array.

4

Add accessibility and responsive design to the component template

Add an aria-label attribute with value 'Greeting messages' to the <ul> element in the GreetingListComponent template. Also, add a CSS style block inside the component with a media query that changes the font size to 1.5rem on screens wider than 600px.

Angular

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

export const GREETING_TOKEN = new InjectionToken('GREETING_TOKEN');

export const greetingProviders = [
  { provide: GREETING_TOKEN, useValue: 'Hello', multi: true },
  { provide: GREETING_TOKEN, useValue: 'Hi', multi: true },
  { provide: GREETING_TOKEN, useValue: 'Welcome', multi: true }
];

@Component({
  selector: 'app-greeting-list',
  standalone: true,
  providers: [greetingProviders],
  template: `
    
      {{ greeting }}
    
  `,
  styles: [
    `
    @media (min-width: 600px) {
      ul {
        font-size: 1.5rem;
      }
    }
    `
  ]
})
export class GreetingListComponent {
  constructor(@Inject(GREETING_TOKEN) readonly greetings: string[]) {}
}

// Your code here

Hint

Add aria-label to the <ul> for accessibility and use a media query in styles for responsive font size.

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