← Angular Course3 / 10

Services & Shared State

Share logic and state across components — injectable services, the inject function, and signal-based services that work like a built-in store.

Ad 728×90

Services & inject

Why: logic that more than one component needs — logging, auth, talking to APIs — lives in a service: a plain class with @Injectable. providedIn: 'root' means the whole app shares ONE instance (a singleton), and inject() asks Angular for it — you never write new yourself. This is dependency injection, the pattern at the heart of Angular.

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

// providedIn: 'root' = one shared instance for the whole app
@Injectable({ providedIn: 'root' })
export class Logger {
  log(message: string) {
    console.log('[app]', message)
  }
}

@Component({
  selector: 'app-save-button',
  template: `<button (click)="save()">Save</button>`,
})
export class SaveButton {
  // inject() asks Angular for the shared instance — you never `new` it
  private logger = inject(Logger)

  save() {
    this.logger.log('saved at ' + Date.now())
  }
}

Lifting State Up

Why: when two siblings need the same data, the state moves to their closest common parent — one owns it, both receive it. The child gets the value as an input and reports changes up with an output. This is the first tool to reach for; most "state management" problems dissolve right here.

import { Component, input, output, signal } from '@angular/core'

@Component({
  selector: 'app-filter-box',
  template: `
    <input [value]="value()" (input)="onInput($event)" />
  `,
})
export class FilterBox {
  value = input.required<string>()
  changed = output<string>() // reports changes up

  onInput(e: Event) {
    this.changed.emit((e.target as HTMLInputElement).value)
  }
}

@Component({
  selector: 'app-search',
  imports: [FilterBox],
  template: `
    <!-- Both siblings need query, so the parent owns it -->
    <app-filter-box [value]="query()" (changed)="query.set($event)" />
    <p>Results for: {{ query() || '(everything)' }}</p>
  `,
})
export class Search {
  query = signal('')
}

A Signal Service — Shared State

Why: for state that changes often and is read in many places — carts, filters, UI panels — a service holding signals IS a store: one shared instance, reactive values, and the update logic in one place. Components inject it and read the signals; no extra library needed. This is the built-in answer to "do I need NgRx?" for most apps.

import { Component, Injectable, computed, inject, signal } from '@angular/core'

// One service instance = one shared store for the whole app
@Injectable({ providedIn: 'root' })
export class CartStore {
  // private: components change it through the methods below
  private items = signal<string[]>([])

  readonly count = computed(() => this.items().length)

  add(item: string) {
    this.items.update((list) => [...list, item])
  }
  clear() {
    this.items.set([])
  }
}

@Component({
  selector: 'app-add-button',
  template: `<button (click)="cart.add('Book')">Add book</button>`,
})
export class AddButton {
  cart = inject(CartStore)
}

@Component({
  selector: 'app-cart-badge',
  // Updates automatically whenever ANY component adds an item
  template: `<span>Cart: {{ cart.count() }}</span>`,
})
export class CartBadge {
  cart = inject(CartStore)
}

Services & inject

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

// providedIn: 'root' = one shared instance for the whole app
@Injectable({ providedIn: 'root' })
export class Logger {
  log(message: string) {
    console.log('[app]', message)
  }
}

@Component({
  selector: 'app-save-button',
  template: `<button (click)="save()">Save</button>`,
})
export class SaveButton {
  // inject() asks Angular for the shared instance — you never `new` it
  private logger = inject(Logger)

  save() {
    this.logger.log('saved at ' + Date.now())
  }
}

Lifting State Up

import { Component, input, output, signal } from '@angular/core'

@Component({
  selector: 'app-filter-box',
  template: `
    <input [value]="value()" (input)="onInput($event)" />
  `,
})
export class FilterBox {
  value = input.required<string>()
  changed = output<string>() // reports changes up

  onInput(e: Event) {
    this.changed.emit((e.target as HTMLInputElement).value)
  }
}

@Component({
  selector: 'app-search',
  imports: [FilterBox],
  template: `
    <!-- Both siblings need query, so the parent owns it -->
    <app-filter-box [value]="query()" (changed)="query.set($event)" />
    <p>Results for: {{ query() || '(everything)' }}</p>
  `,
})
export class Search {
  query = signal('')
}

A Signal Service — Shared State

import { Component, Injectable, computed, inject, signal } from '@angular/core'

// One service instance = one shared store for the whole app
@Injectable({ providedIn: 'root' })
export class CartStore {
  // private: components change it through the methods below
  private items = signal<string[]>([])

  readonly count = computed(() => this.items().length)

  add(item: string) {
    this.items.update((list) => [...list, item])
  }
  clear() {
    this.items.set([])
  }
}

@Component({
  selector: 'app-add-button',
  template: `<button (click)="cart.add('Book')">Add book</button>`,
})
export class AddButton {
  cart = inject(CartStore)
}

@Component({
  selector: 'app-cart-badge',
  // Updates automatically whenever ANY component adds an item
  template: `<span>Cart: {{ cart.count() }}</span>`,
})
export class CartBadge {
  cart = inject(CartStore)
}