Backend interview prep

Start

Angular State Management Basics

Learn Angular State Management from scratch with local state, shared state, RxJS, BehaviorSubject, Signals, NgRx overview, architecture diagrams, enterprise examples, best practices, and interview questions.

State Management is one of the most important concepts in Angular development.

Every Angular application manages state, whether it's a simple counter or a large enterprise banking application.

Understanding how state flows through an application helps developers build applications that are:

  • Scalable
  • Maintainable
  • Predictable
  • Testable
  • Performant

This guide explains Angular State Management from beginner to advanced concepts commonly discussed in Angular interviews.

Table of Contents

  • What is State?
  • Types of State
  • Why State Management?
  • State Management Architecture
  • Local State
  • Shared State
  • RxJS State Management
  • Angular Signals
  • NgRx Overview
  • Enterprise Example
  • Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What is State?

State is any data that an application needs to store and display.

Examples

  • Logged-in user
  • Shopping cart
  • Selected language
  • Theme
  • Dashboard statistics
  • Employee list
  • Form values
  • Notifications

Example

username = 'Venu';

isLoggedIn = true;

cartItems = 4;

These variables represent the application's current state.

State Management Architecture

flowchart LR

User

User --> Component

Component --> State

State --> UI

UI --> User

Whenever the state changes, Angular updates the UI.

Why State Management?

Without proper state management:

  • Duplicate API calls
  • Inconsistent data
  • Complex component communication
  • Difficult debugging
  • Poor scalability

Proper state management provides:

  • Single source of truth
  • Predictable updates
  • Reusable state
  • Easier testing
  • Better performance

Types of State

State Type Example
Local State Input field
Shared State Logged-in user
Server State REST API data
URL State Query parameters
Global State Theme, language
Cached State Employee list

State Hierarchy

flowchart TD

ApplicationState

ApplicationState --> GlobalState

ApplicationState --> FeatureState

ApplicationState --> ComponentState

ApplicationState --> ServerState

Local State

Local state belongs to one component.

@Component({
  standalone: true,
  template: `
    {{count}}
  `
})
export class CounterComponent {

  count = 0;

  increase() {
    this.count++;
  }

}

Only this component can access count.

Local State Architecture

flowchart LR

CounterComponent

CounterComponent --> LocalState

LocalState --> Template

Shared State

Shared state is accessed by multiple components.

Example

@Injectable({
  providedIn: 'root'
})
export class ThemeService {

  theme = 'dark';

}

Multiple components use the same state.

Shared State Architecture

flowchart TD

Header

Header --> ThemeService

Sidebar --> ThemeService

Dashboard --> ThemeService

Footer --> ThemeService

Reactive State with RxJS

Angular commonly uses BehaviorSubject for reactive state.

@Injectable({
  providedIn: 'root'
})
export class UserStateService {

  private user =
    new BehaviorSubject<User | null>(null);

  user$ =
    this.user.asObservable();

  setUser(user: User) {
    this.user.next(user);
  }

}

Consumer

user$ =
this.userState.user$;

RxJS State Flow

flowchart LR

API

API --> UserService

UserService --> BehaviorSubject

BehaviorSubject --> ComponentA

BehaviorSubject --> ComponentB

BehaviorSubject --> ComponentC

Angular Signals

Angular introduced Signals as a built-in reactive state primitive.

Example

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

export class CounterComponent {

  count = signal(0);

  increment() {
    this.count.update(value => value + 1);
  }

}

Read the value

count()

Signals automatically notify Angular when their value changes.

Signals Architecture

flowchart LR

Signal

Signal --> Component

Component --> UI

UI --> Signal

Signals vs BehaviorSubject

Signals BehaviorSubject
Built into Angular Part of RxJS
Synchronous reactive state Observable stream
Read with signal() Subscribe to Observable
Excellent for UI state Excellent for asynchronous streams and shared reactive data
Minimal boilerplate Rich RxJS operators

Global State

Global state is shared throughout the application.

Examples

  • User session
  • Theme
  • Language
  • Permissions
  • Authentication
  • Notifications

Architecture

flowchart TD

RootInjector

RootInjector --> AuthState

RootInjector --> ThemeState

RootInjector --> NotificationState

AuthState --> Dashboard

ThemeState --> Header

NotificationState --> Footer

Server State

Server state comes from external APIs.

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  constructor(
    private http: HttpClient
  ) {}

  getEmployees() {
    return this.http.get<Employee[]>(
      '/api/employees'
    );
  }

}

Server state is usually refreshed, cached, or synchronized with the backend.

Server State Flow

flowchart LR

RESTAPI

RESTAPI --> HttpClient

HttpClient --> Service

Service --> Component

Component --> UI

NgRx Overview

NgRx is Angular's most popular Redux-inspired state management library.

Main building blocks

  • Store
  • Actions
  • Reducers
  • Selectors
  • Effects

Architecture

flowchart LR

User

User --> Action

Action --> Reducer

Reducer --> Store

Store --> Selector

Selector --> Component

Component --> User

NgRx is generally recommended for large applications with complex shared state and predictable state transitions.

When to Use What?

Application Size Recommendation
Small Component State
Small-Medium Shared Services
Medium Signals + Services
Large Enterprise Signals + Services or NgRx (depending on complexity)
Banking / Insurance NgRx or another structured state solution for complex global state

Enterprise Banking Example

An online banking application manages

  • Login Session
  • Customer Profile
  • Accounts
  • Transactions
  • Loans
  • Notifications
  • Theme

Architecture

flowchart TD

Dashboard

Dashboard --> AccountState

Dashboard --> LoanState

Dashboard --> NotificationState

AccountState --> BankingAPI

LoanState --> BankingAPI

NotificationState --> Header

Header --> User

Benefits

  • Centralized state
  • Predictable updates
  • Better testing
  • Reusable data
  • Easier debugging

State Management Comparison

Approach Best For
Component Variables Local UI
Shared Services Shared feature state
BehaviorSubject Reactive shared state
Signals Modern Angular UI state
NgRx Enterprise global state
Server APIs Backend state

Performance Best Practices

Practice Benefit
Keep state minimal Lower memory usage
Separate UI state from server state Cleaner architecture
Use Signals for local UI state Efficient change tracking
Use RxJS for async workflows Powerful stream handling
Avoid unnecessary global state Better maintainability
Cache reusable API data carefully Fewer network requests

Common Mistakes

Putting Everything into Global State

Only global data should live in global state.

Creating Duplicate State

Avoid storing the same information in multiple services.

Storing Temporary UI State Globally

Dialog visibility and temporary form state usually belong inside the component.

Ignoring Reactive Updates

When using Observables or Signals, update state through the intended APIs instead of mutating objects unpredictably.

Using NgRx Too Early

Simple applications often don't need a full Redux-style solution.

Best Practices

  • Keep state as close as possible to where it is used.
  • Prefer component state for local UI.
  • Use shared services for shared feature state.
  • Use Signals for modern Angular UI state.
  • Use RxJS for asynchronous workflows.
  • Consider NgRx only when application complexity justifies it.
  • Avoid duplicate state.
  • Keep a single source of truth.

Advantages

Feature Benefit
Predictable Updates Easier debugging
Shared Data Better communication
Reactive UI Automatic updates
Better Performance Reduced unnecessary work
Testability Easier unit testing
Scalability Enterprise-ready

Top 10 Angular State Management Interview Questions

1. What is state in Angular?

Answer

State is any data that represents the current condition of an application, such as user information, theme, shopping cart contents, or API responses.

2. What are the different types of state?

Answer

  • Local state
  • Shared state
  • Global state
  • Server state
  • URL state
  • Cached state

3. What is local state?

Answer

Local state belongs to a single component and is not shared with other components.

4. What is shared state?

Answer

Shared state is data that multiple components access, typically through singleton services using Dependency Injection.

5. Why is BehaviorSubject commonly used?

Answer

It stores the latest value and immediately provides it to new subscribers, making it ideal for reactive shared state.

6. What are Angular Signals?

Answer

Signals are Angular's built-in reactive primitives for managing state with automatic dependency tracking and UI updates.

7. What is NgRx?

Answer

NgRx is a Redux-inspired state management library for Angular that provides a centralized store, actions, reducers, selectors, and effects for complex applications.

8. When should NgRx be used?

Answer

Use NgRx when an application has complex shared state, predictable state transitions, and many interacting features that benefit from centralized management.

9. What are the best practices for state management?

Answer

  • Keep state minimal.
  • Use local state when possible.
  • Share state only when necessary.
  • Avoid duplicate state.
  • Use Signals or RxJS appropriately.
  • Keep a single source of truth.

10. What is the biggest mistake developers make?

Answer

Treating every piece of data as global state, which increases complexity and makes applications harder to maintain.

Interview Cheat Sheet

Topic Remember
Local State Component
Shared State Service
Reactive State BehaviorSubject
Modern State Signals
Enterprise State NgRx
Server State HttpClient
Global State Singleton Services
Single Source of Truth Important
State Updates Reactive
Best Practice Keep state minimal

Summary

Angular State Management is about organizing and controlling application data efficiently. Small applications often rely on component state and shared services, while larger applications may benefit from Signals, RxJS, or NgRx depending on their complexity. Choosing the right state management approach helps create applications that are predictable, scalable, maintainable, and easier to test.

Key Takeaways

  • ✔ State represents application data at a point in time.
  • ✔ Use local state for component-specific information.
  • ✔ Use shared services for feature-wide state.
  • ✔ BehaviorSubject is excellent for reactive shared state.
  • ✔ Signals provide a modern Angular approach to reactive UI state.
  • ✔ NgRx is suitable for complex enterprise applications.
  • ✔ Keep a single source of truth.
  • ✔ Avoid unnecessary global state.
  • ✔ Separate UI state from server state.
  • ✔ State Management is a core Angular interview topic.

Next Article

➡️ 44-RxJS-BehaviorSubject-QA.md