🧩 Services and Dependency Injection

What Services Are For

A service is a plain TypeScript class that holds logic not tied to any one view: fetching from an API, authentication, logging, business rules, and — crucially — shared state that several components need. In the last lesson, inputs and outputs let parents and children talk. But two components on opposite sides of the tree can't reach each other that way. A service is the shared cabinet they both open.

💡 A useful analogy: If components are the stations on a factory floor, services are the utilities — electricity, water, compressed air — piped to every station. No station owns the water supply; they all just tap into it. That's exactly how a singleton service works.

Typical jobs for a service: data fetching, authentication, logging, form validation rules, and application-wide state like the current user or shopping cart.

Creating & Injecting a Service

Generate a service with the Angular CLI:

ng generate service services/data
# shorthand
ng g s services/data

The generated class carries the @Injectable decorator. The providedIn: 'root' option registers it as an application-wide singleton — one instance shared everywhere, and tree-shakable if nothing uses it.

// data.service.ts
import { Injectable } from '@angular/core';

export interface Item { id: number; name: string; }

@Injectable({ providedIn: 'root' })
export class DataService {
  getData(): Item[] {
    return [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ];
  }
}

To use it in a component, prefer the modern inject() function. It reads cleaner than constructor parameters, works in field initializers, and plays nicely with inheritance:

// item-list.component.ts
import { Component, inject, signal } from '@angular/core';
import { DataService, Item } from '../services/data.service';

@Component({
  selector: 'app-item-list',
  standalone: true,
  template: `
    <h2>Items</h2>
    <ul>
      @for (item of items(); track item.id) {
        <li>{{ item.name }}</li>
      }
    </ul>
  `
})
export class ItemListComponent {
  private dataService = inject(DataService);
  items = signal<Item[]>(this.dataService.getData());
}

How Dependency Injection Works

Dependency injection (DI) is a design pattern where a class receives its dependencies from the outside instead of creating them itself. Your component says "I need a DataService," and Angular's injector supplies one.

💡 Analogy: In a professional kitchen, a chef who needs a knife doesn't forge one — the kitchen manager hands over the right knife from inventory. DI lets your components focus on cooking (view logic) instead of tool-making (constructing services).

When something requests a dependency, Angular walks its injector hierarchy, which mirrors the component tree:

The search runs from the most specific injector outward: the element (component) injector, then any route injectors, and finally the root injector. The first match wins, which is exactly what makes provider scope (next section) so powerful.

Provider Scopes

Where you register a service decides how many instances exist and how long they live. There are three common scopes:

1. Root scope — one app-wide singleton

@Injectable({ providedIn: 'root' })
export class DataService { }

The default and the right choice ~90% of the time. Created lazily on first use, lives for the whole app, shared by everyone.

2. Route scope — one instance per lazy route

// In a lazy route's providers array
export const routes: Routes = [{
  path: 'admin',
  providers: [AdminService],   // fresh instance for this route subtree
  loadComponent: () => import('./admin.component')
}];

3. Component scope — one instance per component

@Component({
  selector: 'app-editor',
  standalone: true,
  providers: [DraftService],   // each <app-editor> gets its own DraftService
  template: `...`
})
export class EditorComponent { }

providers: [
  DataService,                                     // shorthand: useClass itself
  { provide: DataService, useClass: MockDataService }, // swap the implementation
  { provide: API_URL, useValue: 'https://api.example.com' }, // a plain value
  { provide: DataService, useFactory: dataFactory, deps: [ConfigService] } // a factory
]

Sharing State with Signals

The classic pattern for shared state used RxJS BehaviorSubject. It still works, but modern Angular makes reactive state dramatically simpler with signals: a writable signal for the state, and computed for anything derived. No subscribing, no unsubscribing, no memory leaks.

// cart.service.ts
import { Injectable, signal, computed } from '@angular/core';

export interface CartItem { id: number; name: string; price: number; quantity: number; }

@Injectable({ providedIn: 'root' })
export class CartService {
  // Private writable signal — only the service mutates it
  private itemsSignal = signal<CartItem[]>([]);

  // Public read-only view + derived values
  readonly items = this.itemsSignal.asReadonly();
  readonly totalItems = computed(() =>
    this.items().reduce((sum, i) => sum + i.quantity, 0));
  readonly totalPrice = computed(() =>
    this.items().reduce((sum, i) => sum + i.price * i.quantity, 0));

  addToCart(item: CartItem) {
    this.itemsSignal.update(items => {
      const existing = items.find(i => i.id === item.id);
      if (existing) {
        return items.map(i =>
          i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i);
      }
      return [...items, item];
    });
  }

  removeFromCart(id: number) {
    this.itemsSignal.update(items => items.filter(i => i.id !== id));
  }

  clear() {
    this.itemsSignal.set([]);
  }
}

Any component injects it and binds directly — the template updates automatically when the signal changes:

// cart.component.ts
import { Component, inject } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { CartService } from '../services/cart.service';

@Component({
  selector: 'app-cart',
  standalone: true,
  imports: [CurrencyPipe],
  template: `
    <h2>Your Cart</h2>
    @if (cart.items().length === 0) {
      <p class="empty-cart">Your cart is empty</p>
    } @else {
      @for (item of cart.items(); track item.id) {
        <div class="cart-item">
          <span>{{ item.name }}</span>
          <span>{{ item.quantity }} × {{ item.price | currency }}</span>
          <button (click)="cart.removeFromCart(item.id)">Remove</button>
        </div>
      }
      <div class="cart-total">
        <strong>Total: {{ cart.totalPrice() | currency }}</strong>
      </div>
      <button (click)="cart.clear()">Clear Cart</button>
    }
  `
})
export class CartComponent {
  cart = inject(CartService);
}

Data Services & HTTP

Talking to a server is the classic service job. Inject HttpClient (registered app-wide via provideHttpClient() in your bootstrap) and return the Observable it produces:

// product.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';

export interface Product { id: number; name: string; price: number; }

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
  private apiUrl = 'https://api.example.com/products';

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl).pipe(
      catchError(err => {
        console.error('Failed to load products', err);
        return throwError(() => err);
      })
    );
  }

  getProduct(id: number): Observable<Product> {
    return this.http.get<Product>(`${this.apiUrl}/${id}`);
  }

  createProduct(product: Product): Observable<Product> {
    return this.http.post<Product>(this.apiUrl, product);
  }
}

A component can consume that Observable and drop the emitted value straight into a signal with toSignal(), which handles subscription and cleanup for you:

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { ProductService } from '../services/product.service';

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    @for (p of products(); track p.id) {
      <div>{{ p.name }}</div>
    }
  `
})
export class ProductListComponent {
  private productService = inject(ProductService);
  // Auto-subscribes, auto-unsubscribes; starts as []
  products = toSignal(this.productService.getProducts(), { initialValue: [] });
}

A Layered Service Architecture

As an app grows, cramming everything into one service gets messy. A clean convention splits responsibilities into three layers:

Here is a compact facade wiring the data and state layers together:

// product-facade.service.ts
import { Injectable, inject, signal } from '@angular/core';
import { ProductService, Product } from './product.service';

@Injectable({ providedIn: 'root' })
export class ProductFacade {
  private data = inject(ProductService);

  // State lives here as signals
  readonly products = signal<Product[]>([]);
  readonly loading  = signal(false);
  readonly error    = signal<string | null>(null);

  loadProducts() {
    this.loading.set(true);
    this.error.set(null);

    this.data.getProducts().subscribe({
      next: products => this.products.set(products),
      error: () => this.error.set('Failed to load products.'),
      complete: () => this.loading.set(false)
    });
  }
}

// product-list.component.ts
import { Component, inject } from '@angular/core';
import { ProductFacade } from '../services/product-facade.service';

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    @if (facade.loading()) { <p>Loading…</p> }
    @if (facade.error(); as err) { <p class="error">{{ err }}</p> }

    @for (p of facade.products(); track p.id) {
      <div class="product-card">{{ p.name }}</div>
    }
  `
})
export class ProductListComponent {
  facade = inject(ProductFacade);
  constructor() { this.facade.loadProducts(); }
}

The component knows nothing about HTTP, error handling, or how state is stored — it just reads signals and calls facade methods. That separation is what keeps large Angular codebases testable and easy to change.

Hands-on Exercise

// cart.service.ts
import { Injectable, signal, computed, effect } from '@angular/core';

export interface CartItem { id: number; name: string; price: number; quantity: number; }

@Injectable({ providedIn: 'root' })
export class CartService {
  private itemsSignal = signal<CartItem[]>(this.load());
  readonly items = this.itemsSignal.asReadonly();
  readonly totalItems = computed(() =>
    this.items().reduce((n, i) => n + i.quantity, 0));

  constructor() {
    // Stretch goal: persist on every change
    effect(() => localStorage.setItem('cart', JSON.stringify(this.items())));
  }

  addToCart(item: CartItem) {
    this.itemsSignal.update(items => {
      const found = items.find(i => i.id === item.id);
      return found
        ? items.map(i => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)
        : [...items, { ...item, quantity: 1 }];
    });
  }

  removeFromCart(id: number) {
    this.itemsSignal.update(items => items.filter(i => i.id !== id));
  }

  private load(): CartItem[] {
    return JSON.parse(localStorage.getItem('cart') ?? '[]');
  }
}

// cart-badge.component.ts
import { Component, inject } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-cart-badge',
  standalone: true,
  template: `🛒 {{ cart.totalItems() }}`
})
export class CartBadgeComponent {
  cart = inject(CartService);
}

Best Practices

Summary & Quiz

📚 Further Reading

• angular.dev — Dependency injection
• angular.dev — Hierarchical injectors
• angular.dev — Signals

🚀 What's Next?

Services often produce raw data — dates, numbers, currencies — that needs formatting before it reaches the screen. Next up: pipes, Angular's clean, reusable way to transform data right in the template.