Angular Dependency Injection: Multi Providers

Angular Dependency Injection: Multi Providers

Angular’s dependency injection mechanism enables you to easily “plug-in” external functionalities. Instead of creating instances of dependencies yourself, you leave this task to the dependency injection mechanism.

Angular’s dependency injection mechanism enables you to easily “plug-in” external functionalities. Instead of creating instances of dependencies yourself, you leave this task to the dependency injection mechanism. In most cases you don’t need to think too much about your instances and how they are created, Angular takes care of it for us.

But not all cases are standard, and Angular lets you take control of when and how your dependencies are instantiated and injected. Some options might look a bit magical and obscure. In this article, we are going to see the multi: true option.

Reminder: Providers

You can skip this section if you are familiar with the concepts of Token and Provider.

When you inject a dependency in a component, you pass a tokento the component injector. When injecting a class, like a service, the token is the class name by default:

@Component({
  selector: 'app-test', 
  templateUrl: './test.component.html', 
  styleUrls: ['./test.component.scss'],
  providers: [{ provide: TestService, useClass: TestService }],
})

The provider object defines how to get the dependency associated with the token. In the example above, we tell Angular to use the class TestService when the dependency identified by the token TestService is asked for.

The provider above is a bit repetitive and Angular provides an equivalent “sugar” syntax to make it more concise that you might be more familiar with:

@Component({
  selector: 'app-test', 
  templateUrl: './test.component.html', 
  styleUrls: ['./test.component.scss'],
  providers: [TestService]
})

You might not be providing services in your components that regularly and the two previous examples might look new to you. In this case, please check [this article_](https://levelup.gitconnected.com/angular-interview-question-dependency-injection-3da676906ef9)._

But dependency injection is not limited to services, not even to classes. You can use it to inject anything you like, for example objects. In this case, you will have to create the token yourself.

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

    export const TOKEN = new InjectionToken<string>('MyToken');

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      providers: [{ provide: TOKEN, useValue: 'my injected object' }]
    })
    export class AppComponent {
      constructor(@Inject(TOKEN) public myInjectObject: string) {
        console.log(myInjectObject);
      }
    }

To learn more about injecting objects and creating tokens, you can check this article.

dependency-injection angular javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Inject Objects Into Your Component with Angular Dependency Injection

Dependency Injection is a common design pattern to deal with dependencies. Instead of creating instances of dependencies yourself when you need them, you leave this task to a dependency injection mechanism.

Angular 9 Dependency Injection Example Tutorial

Angular ships with one design pattern and its own dependency injection framework. Dependencies are services that a class needs to perform its function.

What you always wanted to know about Angular Dependency Injection tree

If you didn’t dive deep into angular dependency injection mechanism, your mental model should be that in angular application we have some root injector with all merged providers, every component has its own injector and lazy loaded module introduces new injector. But maybe there is some more you should be aware of? Also a while ago, so-called Tree-Shakeable Tokens [https://github.com/angular/angular/pull/22005] feature was merged into master branch. If you are like me, you probably want to kno

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc