How dependency injection works in Angular

Introduction

Dependency Injection helps Angular automatically provide the things your components or services need. It saves you from creating or managing those things yourself.

When a component needs to use a service like fetching data from a server.

When you want to share data or logic between different parts of your app.

When you want to make your code easier to test by replacing real services with fake ones.

When you want Angular to manage the creation and lifetime of objects automatically.

Syntax

Angular

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

@Injectable({ providedIn: 'root' })
export class MyService {
  // service code here
}

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

@Component({
  selector: 'app-example',
  template: `<p>Example works!</p>`,
  standalone: true
})
export class ExampleComponent {
  private myService = inject(MyService);
  // use myService in component
}

The @Injectable decorator marks a class as available for injection.

The inject() function is used inside components or services to get the dependency.

Examples

This creates a service called LoggerService that Angular can inject anywhere.

Angular

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

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string) {
    console.log(message);
  }
}

This component uses dependency injection to get LoggerService and calls its log method when a button is clicked.

Angular

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

@Component({
  selector: 'app-log-example',
  template: `<button (click)="logMessage()">Log</button>`,
  standalone: true
})
export class LogExampleComponent {
  private logger = inject(LoggerService);

  logMessage() {
    this.logger.log('Button clicked!');
  }
}

Sample Program

This example shows a GreetingService that provides a greeting message. The GreetingComponent injects this service and displays the greeting in its template.

Angular

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

@Injectable({ providedIn: 'root' })
export class GreetingService {
  getGreeting() {
    return 'Hello from GreetingService!';
  }
}

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

@Component({
  selector: 'app-greeting',
  template: `<h1>{{ greeting }}</h1>`,
  standalone: true
})
export class GreetingComponent {
  private greetingService = inject(GreetingService);
  greeting = this.greetingService.getGreeting();
}

Important Notes

Angular creates one instance of a service by default (singleton) when provided in 'root'.

You can inject services in components, other services, or directives.

Using dependency injection makes your app easier to maintain and test.

Summary

Dependency Injection lets Angular provide needed services automatically.

Use @Injectable to make a class injectable and inject() to get it.

This helps keep your code clean, reusable, and easy to test.