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

Need a 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

Need a 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

Need a 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

Need a hint?

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