Dependency Injection - The Castle Supply System

Dependency Injection (DI) is a pattern where Angular automatically delivers dependencies to components and services - like a supply system delivering weapons and provisions to castles.

Injecting Services

Method 1: inject() (Angular 14+, recommended)

import { Component, inject } from '@angular/core';
import { KatanaService } from './services/katana.service';

@Component({
  selector: 'app-forge',
  standalone: true,
  template: `
    <h2>Katana Forge</h2>
    <button (click)="forgeKatana()">Forge a Katana</button>
    <ul>
      @for (katana of katanas; track katana.id) {
        <li>{{ katana.name }} - {{ katana.damage }} DMG</li>
      }
    </ul>
  `
})
export class ForgeComponent {
  private katanaService = inject(KatanaService);
  katanas = this.katanaService.getAll();

  forgeKatana(): void {
    this.katanaService.forge('Masamune', 'Tachi');
    this.katanas = this.katanaService.getAll();
  }
}

Method 2: Constructor Injection (classic)

@Component({...})
export class ForgeComponent {
  constructor(private katanaService: KatanaService) {}

  forgeKatana(): void {
    this.katanaService.forge('Masamune', 'Tachi');
  }
}

inject() vs Constructor