1. What is State Management in Angular?

What is State?

State is the data that represents the current condition of an application or UI at a particular point in time.

For example, an Angular application may currently have:

Logged-in user = Syed
Selected product = Laptop
Shopping cart count = 3
Search text = "Dell"
Loading = true
Products = [...]
Theme = Dark

All of these values are examples of application state.

What is State Management?

State management is the way we store, update, share, and react to changes in application data.

In simple terms:

State management controls where application data lives, how it changes, and which components can access those changes.

For example:

Products Component
       ↓
Loads products
       ↓
Products State
       ↓
State changes
       ↓
UI automatically updates

Simple Example

product-list.ts

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

@Component({
  selector: 'app-product-list',
  standalone: true,

  template: `
    <h2>Products</h2>

    <p>Selected Product: {{ selectedProduct }}</p>

    <button (click)="selectProduct('Laptop')">
      Laptop
    </button>

    <button (click)="selectProduct('Mobile')">
      Mobile
    </button>
  `
})
export class ProductList {

  selectedProduct = '';

  selectProduct(product: string) {

    this.selectedProduct = product;

  }
}

Here:

selectedProduct = '';

is state.

When:

this.selectedProduct = product;

changes the state, Angular updates:

<p>Selected Product: {{ selectedProduct }}</p>

So the flow is:

User clicks Laptop
       ↓
selectProduct('Laptop')
       ↓
selectedProduct = 'Laptop'
       ↓
State changed
       ↓
Angular updates UI
       ↓
Selected Product: Laptop

Why Do We Need State Management?

Imagine an application with:

Login
Products
Shopping Cart
Orders
Admin Dashboard
User Profile

Different components may need access to different data.

For example:

Login Component
      ↓
Current User
      ↓
Header
Dashboard
Profile
Admin Menu

If multiple components need the same data, we need a clear strategy for managing it.

Without good state management:

Component A
   ↓
Component B
   ↓
Component C
   ↓
Component D

data may be passed repeatedly through component inputs and outputs, or duplicated across components.

With shared state:

             Shared State
            /     |      \
           /      |       \
       Header  Dashboard  Profile

components can work with a common source of data.

Common Types of State

For interview purposes, you can think of Angular state in several categories.

State Management Approaches in Angular

Angular doesn't require one single state-management solution.

You can use:

Simple application
      ↓
Component properties / Signals

Multiple components
      ↓
Shared Service + Signals/RxJS

Complex application
      ↓
Dedicated state-management library

For example:

Component State
       ↓
signal()


Shared State
       ↓
Service + Signals


Async/Event Streams
       ↓
RxJS


Large Structured State
       ↓
NgRx or another state library

You should choose based on application complexity rather than automatically adding a state library.

State Using a Signal

Modern Angular makes local state particularly straightforward with Signals.

Full Example

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

@Component({
  selector: 'app-counter',
  standalone: true,

  template: `
    <h2>Counter</h2>

    <p>Count: {{ count() }}</p>

    <button (click)="increment()">
      Increment
    </button>
  `
})
export class Counter {

  count = signal(0);

  increment() {

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

  }
}

Here:

count = signal(0);

represents state.

Initial state:

count = 0

After clicking:

count = 1

Angular knows that the signal changed and updates the template.

2. What is Local Component State?

What is it?

Local component state is data that belongs to one component and is primarily needed only by that component.

For example:

Product Component
       │
       ├── selectedProduct
       ├── searchText
       ├── isLoading
       └── showDetails

If no other component needs these values, they can remain local.

Full Simple Example

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

@Component({
  selector: 'app-product',
  standalone: true,

  template: `
    <h2>Products</h2>

    <p>
      Selected:
      {{ selectedProduct() }}
    </p>

    <button
      (click)="selectProduct('Laptop')">

      Laptop

    </button>

    <button
      (click)="selectProduct('Mobile')">

      Mobile

    </button>

    <br><br>

    <button
      (click)="toggleDetails()">

      Show / Hide Details

    </button>

    @if (showDetails()) {

      <p>
        Product details displayed.
      </p>

    }
  `
})
export class Product {

  selectedProduct =
    signal<string>('None');

  showDetails =
    signal(false);


  selectProduct(
    product: string
  ) {

    this.selectedProduct.set(
      product
    );

  }


  toggleDetails() {

    this.showDetails.update(
      value => !value
    );

  }

}

Understanding the State

This component contains two local state values:

selectedProduct =
  signal<string>('None');

and:

showDetails =
  signal(false);

They belong to the Product component.

Initially:

Product Component

selectedProduct = None
showDetails     = false

User clicks:

Laptop

then:

this.selectedProduct.set(
  'Laptop'
);

State becomes:

selectedProduct = Laptop
showDetails     = false

Angular updates:

Selected: Laptop

Why is it Called "Local" State?

Because the state belongs to that component.

Product Component
┌─────────────────────────────┐
│                             │
│ selectedProduct = Laptop    │
│ showDetails = true          │
│                             │
│      Local State            │
│                             │
└─────────────────────────────┘

Another unrelated component does not automatically have access to those values.

Examples of Local Component State

Local state is ideal for things such as:

isLoading = signal(false);

isMenuOpen = signal(false);

selectedTab = signal('details');

searchText = signal('');

selectedProductId =
  signal<number | null>(null);

These are often UI-specific values.

Local State Doesn't Have to Use Signals

This is important.

You can have simple component state using ordinary properties:

export class Product {

  selectedProduct = 'None';

  showDetails = false;

}

These are also local component state.

Signals are simply one modern reactive mechanism for representing state:

export class Product {

  selectedProduct =
    signal('None');

  showDetails =
    signal(false);

}

So:

Local State
    ↓
is a concept

Signal
    ↓
is one way to implement it

When Should State Become Shared?

Suppose only Product needs:

selectedProduct

Keep it local:

Product Component
      ↓
selectedProduct

But suppose the same state is needed by:

Header
Product List
Shopping Cart
Checkout

Then keeping separate copies becomes problematic.

Instead:

             Cart Service
             Shared State
            /     |      \
           /      |       \
       Header   Cart    Checkout

At that point, a shared service using Signals or RxJS may be more appropriate.

Local State vs Shared State

Example:

Local

isMenuOpen
showPassword
selectedTab
isModalOpen

Shared

Current User
Shopping Cart
User Permissions
Application Settings

State vs State Management

Don't confuse these two terms.

State

The actual value:

count = signal(10);

Here:

count = 10

is state.

State Management

Everything around managing that value:

Where is count stored?

Who can read it?

Who can change it?

How is it changed?

Who reacts when it changes?

Should it persist?

That's state management.

Simple Mental Model

Think about state management like this:

             STATE
               │
        Current application
             data
               │
       ┌───────┴───────┐
       ↓               ↓

 Local State       Shared State
       │               │
       ↓               ↓
One Component     Many Components
       │               │
       ↓               ↓
Property/Signal   Service +
                  Signal/RxJS

As the application becomes more complex:

Local State
     ↓
Shared Service State
     ↓
Structured Global State
     ↓
NgRx / other library

You don't necessarily need to progress through all these levels. Use the simplest approach that satisfies the application's requirements.

Key Points

• State means the current data/condition of an application.
• State management means storing, updating, sharing, and reacting to that state.
• Angular applications can have local, shared, server, router, and persisted state.
• Local component state belongs primarily to one component.
• Local state can use ordinary properties.
• Modern Angular can use signal() for reactive local state.
• Not every state value should be global.
• Keep state local when only one component needs it.
• Move state to a shared service when multiple unrelated components need the same state.
• Signals and RxJS can both participate in state management.
• Large applications may benefit from dedicated libraries such as NgRx, but they are not required for every application.

Interview Questions & Answers

1. What is state in Angular?

State is the current data or condition of an Angular application or component.

Examples include:

Current User
Products
Cart Items
Selected Product
Loading Status

2. What is state management?

State management is the process of storing, updating, sharing, and reacting to application state in a predictable way.

3. What is local component state?

Local component state is data owned and primarily used by a single component.

isLoading = signal(false);

4. Do we need NgRx for state management?

No. Simple applications can use component state, Signals, or shared services. Dedicated state libraries become useful when application state and interactions become sufficiently complex.

5. Can Signals be used for state management?

Yes. Signals are well suited to reactive local state and can also be used inside services for shared state.

count = signal(0);

6. When should state remain local?

Keep state local when it is needed primarily by one component.

Examples:

isMenuOpen
selectedTab
showDetails

7. When should state be moved to a service?

When multiple components need to access or update the same state, a shared service is often appropriate.

           AuthService
          Current User
          /     |     \
      Header  Admin  Profile

Interview Quick Answer

State is the current data or condition of an Angular application. State management is the process of storing, updating, sharing, and reacting to that data. Local component state belongs primarily to one component and can be implemented using normal component properties or Angular Signals such as signal().