🔌 Services and Dependency Injection

What Are Services?

A service is a plain TypeScript class that holds non-UI concerns: fetching data, business rules, shared state, logging, authentication. Components stay lean and focused on the view; everything else lives in services that any component can share.

💡 A useful analogy: If components are the front-desk staff of a hotel — the people guests actually talk to — services are the back office that manages reservations, payments, and records. The front desk doesn't need to know how billing works; it just calls the billing service when it needs a total.

How Dependency Injection Works

Dependency injection (DI) is a design pattern where a class declares what it needs instead of creating it. Angular's injector builds the dependency and hands it over. You never write new ProductService(); you just ask for one.

💡 The car-factory analogy: When you build a car you don't manufacture your own engine and wheels — you specify what you need and the factory supplies ready-made parts. DI is that factory for your classes.

Angular's DI has three moving parts:

• Provider — the recipe telling Angular how to create the dependency.
• Injector — the container that holds instances and creates them on demand.
• Consumer — the class that declares the dependency (via constructor or inject()).

Declaring a service and consuming it is a two-line affair:

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

@Injectable({ providedIn: 'root' }) // registers a root-level singleton
export class LoggerService {
  log(message: string): void {
    console.log(`[${new Date().toISOString()}] ${message}`);
  }
}

// any-component.ts — consume it with inject()
import { Component, inject } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({ /* ... */ })
export class AnyComponent {
  private logger = inject(LoggerService); // Angular supplies the instance
}

Provider Scopes & Hierarchy

Angular's injectors form a tree that mirrors your component tree. Where you provide a service decides how many instances exist and who shares them.

Resolution rules

When a component requests a service, Angular searches outward: the component's own injector first, then up through parent components, and finally the root injector. The first provider it finds wins. If none exists, Angular throws a "No provider" error.

Component-level provider example

Providing at the component level gives each component subtree its own isolated instance — handy for per-widget state:

// counter.service.ts — note: NO providedIn
import { Injectable } from '@angular/core';

@Injectable()
export class CounterService {
  private count = 0;
  increment(): void { this.count++; }
  get value(): number { return this.count; }
}

// parent.component.ts
@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [ChildComponent],
  providers: [CounterService], // one instance shared by parent + children
  template: `
    <p>Total: {{ counter.value }}</p>
    <app-child></app-child>
    <app-child></app-child>
  `,
})
export class ParentComponent {
  counter = inject(CounterService);
}

Because the service is provided on the parent, both child components share the parent's single counter. Move the providers array down to ChildComponent and each child gets its own independent counter instead.

Provider Types & Injection Tokens

A class is the default recipe, but Angular can provide values, factories, and aliases too. This flexibility lets you inject configuration, swap implementations, and keep everything type-safe.

Injecting configuration with an InjectionToken

You can't inject an interface (types vanish at runtime), so for non-class values use an InjectionToken — a unique, typed key:

// app.config.ts
import { InjectionToken } from '@angular/core';

export interface AppConfig {
  apiUrl: string;
  theme: 'light' | 'dark';
}

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

// providing the value (in main.ts providers or a component)
export const configProvider = {
  provide: APP_CONFIG,
  useValue: { apiUrl: 'https://api.example.com', theme: 'light' } as AppConfig,
};

// consuming it — fully typed
import { inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private config = inject(APP_CONFIG);
  readonly baseUrl = this.config.apiUrl;
}

Stateful Services for State

A root-provided service is a natural home for shared application state. Pair it with an RxJS BehaviorSubject — a stream that remembers its latest value — and any component can subscribe and stay in sync.

// cart.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, map } from 'rxjs';
import { Product } from '../models/product';

export interface CartItem { product: Product; quantity: number; }

@Injectable({ providedIn: 'root' })
export class CartService {
  // private writable source of truth
  private readonly items = new BehaviorSubject<CartItem[]>([]);

  // public read-only streams for components to subscribe to
  readonly items$ = this.items.asObservable();

  readonly totalItems$: Observable<number> = this.items$.pipe(
    map(items => items.reduce((sum, i) => sum + i.quantity, 0))
  );

  readonly totalPrice$: Observable<number> = this.items$.pipe(
    map(items => items.reduce((sum, i) => sum + i.product.price * i.quantity, 0))
  );

  addToCart(product: Product, quantity = 1): void {
    const current = this.items.value;
    const existing = current.find(i => i.product.id === product.id);

    if (existing) {
      // immutable update: build a new array
      this.items.next(current.map(i =>
        i.product.id === product.id
          ? { ...i, quantity: i.quantity + quantity }
          : i
      ));
    } else {
      this.items.next([...current, { product, quantity }]);
    }
  }

  removeFromCart(productId: number): void {
    this.items.next(this.items.value.filter(i => i.product.id !== productId));
  }

  clear(): void {
    this.items.next([]);
  }
}

Consuming it is effortless with the async pipe, which subscribes and unsubscribes for you:

@Component({
  selector: 'app-cart-summary',
  standalone: true,
  imports: [CommonModule],
  template: `
    <span>{{ cart.totalItems$ | async }} items</span>
    <strong>{{ cart.totalPrice$ | async | currency }}</strong>
  `,
})
export class CartSummaryComponent {
  cart = inject(CartService);
}

Services with HttpClient

API communication belongs in a service so components never touch URLs directly. Angular's HttpClient returns Observables and is enabled with provideHttpClient() at bootstrap.

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { authInterceptor } from './app/auth.interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
});

// user.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, catchError, retry, throwError } from 'rxjs';
import { User } from './user.model';

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  private apiUrl = '/api/users';

  getUsers(page = 1, limit = 10): Observable<User[]> {
    const params = new HttpParams()
      .set('page', page)
      .set('limit', limit);
    return this.http.get<User[]>(this.apiUrl, { params }).pipe(
      retry(2),
      catchError(this.handleError)
    );
  }

  createUser(user: Omit<User, 'id'>): Observable<User> {
    return this.http.post<User>(this.apiUrl, user).pipe(catchError(this.handleError));
  }

  private handleError(error: any): Observable<never> {
    const message = error.error instanceof ErrorEvent
      ? `Client error: ${error.error.message}`
      : `Server error ${error.status}: ${error.message}`;
    console.error(message);
    return throwError(() => new Error(message));
  }
}

Functional interceptors

Interceptors modify every request or response globally — perfect for attaching auth tokens. Modern Angular uses lightweight functional interceptors:

// auth.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (token) {
    req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  }
  return next(req);
};

Testing Services

Services are the easiest part of Angular to test because there's no DOM involved. Angular's TestBed gives you a real injector, and HttpClientTestingModule lets you assert on outgoing requests without a server.

Testing a stateful service

// cart.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { CartService } from './cart.service';
import { Product } from '../models/product';

describe('CartService', () => {
  let service: CartService;
  const product: Product = { id: 1, name: 'Widget', price: 100 } as Product;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(CartService);
  });

  it('adds an item to the cart', (done) => {
    service.addToCart(product, 2);
    service.items$.subscribe(items => {
      expect(items.length).toBe(1);
      expect(items[0].quantity).toBe(2);
      done();
    });
  });

  it('computes the total price', (done) => {
    service.addToCart(product, 3); // 3 × $100
    service.totalPrice$.subscribe(total => {
      expect(total).toBe(300);
      done();
    });
  });
});

Testing an HTTP service

// user.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
import { UserService } from './user.service';

describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [provideHttpClient(), provideHttpClientTesting()],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => httpMock.verify()); // no unexpected requests

  it('fetches users', () => {
    const mock = [{ id: 1, name: 'Ada', email: 'ada@example.com' }];
    service.getUsers().subscribe(users => expect(users).toEqual(mock as any));

    const req = httpMock.expectOne(r => r.url === '/api/users');
    expect(req.request.method).toBe('GET');
    req.flush(mock); // supply the fake response
  });
});

Hands-on Exercise

updateQuantity(productId: number, quantity: number): void {
  if (quantity <= 0) { this.removeFromCart(productId); return; }
  this.items.next(
    this.items.value.map(i =>
      i.product.id === productId ? { ...i, quantity } : i
    )
  );
  this.persist();
}

private persist(): void {
  localStorage.setItem('cart', JSON.stringify(this.items.value));
}

// in the constructor:
constructor() {
  const saved = localStorage.getItem('cart');
  if (saved) this.items.next(JSON.parse(saved));
}

// cart.service.spec.ts — merge test
it('merges quantity for a repeated product', (done) => {
  service.addToCart(product, 1);
  service.addToCart(product, 2);
  service.items$.subscribe(items => {
    expect(items.length).toBe(1);
    expect(items[0].quantity).toBe(3);
    done();
  });
});

Summary & Quiz

📚 Further Reading

• angular.dev — Dependency injection guide
• Hierarchical injectors
• Communicating with HttpClient
• Testing services

🚀 What's Next?

You've covered Angular's core — components, communication, and services. Next the module shifts gears to Progressive Web Apps: how to make a web app installable, offline-capable, and app-like.