State Management Basics

Local State:    Data relevant only to one component (e.g., isDropdownOpen)
Shared State:   Data shared by 2-3 related components (use a Service)
Global State:   Data used across the entire app (user auth, cart — use NgRx or signal store)
Server State:   Data fetched from and synced with a backend API

export class DropdownComponent {
  isOpen: boolean = false;          // Local state
  selectedOption: string = '';       // Local state

  toggle(): void { this.isOpen = !this.isOpen; }
}

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

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

@Injectable({ providedIn: 'root' })
export class CartService {
  // BehaviorSubject holds the current state
  private cartItems = new BehaviorSubject<CartItem[]>([]);

  // Expose as Observable (read-only)
  cartItems$ = this.cartItems.asObservable();

  addToCart(item: CartItem): void {
    const current = this.cartItems.getValue();
    this.cartItems.next([...current, item]);  // Immutable update!
  }

  removeFromCart(id: number): void {
    const updated = this.cartItems.getValue().filter(item => item.id !== id);
    this.cartItems.next(updated);
  }

  getTotal(): number {
    return this.cartItems.getValue()
      .reduce((sum, item) => sum + (item.price * item.quantity), 0);
  }
}

export class CartIconComponent implements OnInit {
  itemCount: number = 0;

  constructor(private cartService: CartService) {}

  ngOnInit(): void {
    this.cartService.cartItems$.subscribe(items => {
      this.itemCount = items.length;
    });
  }
}

<!-- Use the async pipe for automatic subscription management -->
<div class="cart-icon">
  🛒 {{ (cartService.cartItems$ | async)?.length }} items
</div>

Component dispatches an Action
         ↓
    Reducer updates the State
         ↓
    Selector reads from State
         ↓
    Component re-renders

// Example NgRx action
import { createAction, props } from '@ngrx/store';

export const addToCart = createAction(
  '[Cart] Add Item',
  props<{ item: CartItem }>()
);

// Example NgRx reducer
import { createReducer, on } from &#039;@ngrx/store&#039;;

export const cartReducer = createReducer(
  [],
  on(addToCart, (state, { item }) => [...state, item])
);

import { signal, computed } from '@angular/core';

export class CartComponent {
  cartItems = signal<CartItem[]>([]);

  // Computed signal — automatically recalculates when cartItems changes
  itemCount = computed(() => this.cartItems().length);
  total = computed(() => this.cartItems().reduce((s, i) => s + i.price, 0));

  addItem(item: CartItem): void {
    this.cartItems.update(items => [...items, item]);
  }
}