angular-state-management

Angular 20: Angular typically uses properties within component classes to manage local state. For more complex global state, it often leverages services and can integrate with libraries like NgRx (for reactive state management with RxJS Observables). Angular 20 introduces "Signals" as a new reactivity primitive, aiming to simplify state management and improve performance.

// Component state
export class MyComponent {
  count = 0; // Simple property for state

  increment() {
    this.count++;
  }

  // With Angular Signals (introduced in Angular 20)
  // import { signal } from '@angular/core';
  // count = signal(0);
  // increment() {
  //   this.count.update(value => value + 1);
  // }
}

When to Use	Angular Rationale (Mutability & State Management)
✅ Complex Data Structures (@Input) for forms or display.	Necessary when passing large or complex domain models (e.g., a user profile object, a list of orders). Passing by reference avoids the overhead of copying large data structures.
✅ Shared State Management (Services).	Critical when communicating with services. If a service provides an observable of a data object, all components receiving that object will be looking at the same instance, allowing for real-time updates when any component (or the service) mutates its internal state.
⚠️ To Signal a Change in OnPush Components.	When using ChangeDetectionStrategy.OnPush, if a child component mutates the received object/array, the Change Detector will not notice because the memory reference itself has not changed. To signal a change, you must enforce Immutability by creating and passing a new reference (e.g., using spread ... operator) to force Angular to detect the change.