Introduction

If you’re working with Angular, you’ve likely encountered the term dependency injection (DI) numerous times. But what exactly is DI, and why is it so central to Angular applications? In this article, I’ll demystify Angular’s dependency injection system, show you why it’s beneficial, and walk you through practical usage patterns with clear examples.

What is Dependency Injection?

Dependency injection is a software design pattern in which a class receives its dependencies from external sources rather than creating them inside itself. This approach offers key benefits:

• Decoupling: Classes don’t need to know how to create dependencies.
• Testability: Dependencies can be substituted easily for mocks or stubs.
• Modularity: Components become easier to maintain and update.

Angular’s powerful DI system allows you to inject providers (services, values, etc.) anywhere in your application.

Registering Providers in Angular

Providers are classes or values that Angular can inject. You typically register them in the @Injectable decorator or component/module metadata.

Let’s create a simple service:

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

@Injectable({
  providedIn: 'root',
})
export class LoggerService {
  log(message: string) {
    console.log(`[Logger]: ${message}`);
  }
}

Here, providedIn: 'root' ensures a singleton instance of LoggerService is available application-wide.

Injecting Dependencies into Components

Now, let’s inject LoggerService into a component:

import { Component, OnInit } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit {
  constructor(private logger: LoggerService) {}

  ngOnInit() {
    this.logger.log('Dashboard initialized.');
  }
}

Angular automatically creates an instance of LoggerService and assigns it to the logger parameter. No need to use new LoggerService() in your component.

Providing Services at Different Scopes

You can control the lifetime and visibility of services by choosing where to provide them:

• Application-wide (Singleton): By using providedIn: 'root'.
• Module-level: By adding the service to the providers array in a module.
• Component-level: By adding the service to the providers array in a component decorator – creates a unique instance for that component and its children.

Example of component-scoped provider:

@Component({
  selector: 'app-settings',
  providers: [LoggerService],
  templateUrl: './settings.component.html',
})
export class SettingsComponent {}

When Should You Use Dependency Injection?

DI is best for services that provide data, utility logic, or cross-cutting concerns like logging and HTTP communication. It’s overkill for simple data objects or logic confined to a specific component.

Conclusion

Angular’s dependency injection framework is elegant and powerful, allowing you to build modular, testable, and maintainable applications. By understanding how DI works and best practices for provider registration, you’ll be able to architect scalable Angular solutions with confidence.

---

Thanks for reading! If you’re interested in more Angular deep dives, check out my previous articles or connect with me in the comments below. —Angus