# Angular State Management – Input/Output, Services, NgRx, and Signals Angular provides multiple ways to manage state. The right approach depends on the **scope and complexity of the state**. ### 1. `@Input()` / `@Output()` Best for **parent-child component communication**. ```typescript // Parent <app-user [user]="user" (userChanged)="onUserChanged($event)" /> ``` ```typescript // Child @Input() user!: User; @Output() userChanged = new EventEmitter<User>(); updateUser(user: User) { this.userChanged.emit(user); } ``` **Use when:** * State belongs to a component. * Communication is mainly between parent and child. * The component hierarchy is simple. **Limitation:** Passing data through multiple component levels can become cumbersome, commonly called **prop drilling**. --- ### 2. Services A service is useful for **sharing state between unrelated components**. ```typescript @Injectable({ providedIn: 'root' }) export class CartService { private items: Product[] = []; addItem(item: Product) { this.items.push(item); } getItems() { return this.items; } } ``` Components inject the same singleton service and can access shared state. **Use when:** * State is shared across multiple components. * The state logic is relatively simple. * You don't need the full NgRx architecture. For more reactive state, services can use **RxJS `BehaviorSubject`/`Observable`** or Angular Signals. --- ### 3. NgRx NgRx is generally used for **large and complex application state**. Typical flow: ```text Component ↓ Dispatch Action ↓ Reducer / Effect ↓ Store ↓ Selector ↓ Component ``` Example: ```typescript store.dispatch(loadUsers()); ``` Reducer: ```typescript on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })) ``` Component: ```typescript users$ = this.store.select(selectUsers); ``` **Advantages:** * Centralized state. * Predictable state transitions. * Excellent debugging with Redux DevTools. * Clear separation of actions, reducers, selectors, and effects. * Good for complex workflows and large teams. **Disadvantages:** * More boilerplate. * More concepts to learn. * Can be overkill for small applications. --- ### 4. Angular Signals Signals are Angular's built-in **reactive state primitive**. ```typescript count = signal(0); increment() { this.count.update(value => value + 1); } ``` Template: ```html <p>{{ count() }}</p> ``` Computed state: ```typescript doubleCount = computed(() => this.count() * 2); ``` Side effects: ```typescript effect(() => { console.log(this.count()); }); ``` Signals are particularly useful for **local and shared state without needing RxJS for everything**. A service can also expose signals: ```typescript @Injectable({ providedIn: 'root' }) export class CartService { private items = signal<Product[]>([]); readonly cartItems = this.items.asReadonly(); addItem(product: Product) { this.items.update(items => [...items, product]); } } ``` --- ## When should you use each? | Approach | Best For | | ------------------------ | ------------------------------------------------- | | `@Input()` / `@Output()` | Parent-child communication | | Service | Shared/simple application state | | Signals | Local/shared reactive state | | RxJS | Async streams and event-based/reactive operations | | NgRx | Large, complex, centralized application state | ### Interview answer > **I choose state management based on the scope and complexity of the state. For parent-child communication, I use Input and Output. For shared state with relatively simple business logic, I prefer a service, often using Signals or RxJS. Angular Signals are useful for reactive local and shared state with less boilerplate. For large applications where state transitions, side effects, caching, and debugging become complex, I use NgRx with actions, reducers, selectors, and effects. I avoid NgRx for simple state because it can introduce unnecessary complexity.**
Ravindra Wadile · · 1 likes