| JNTech

1. What is state management?

State management is the process of storing, updating, and sharing application data across components. It helps maintain consistent data and synchronize UI changes.

2. What is local component state?

Local component state is data managed within a single component, such as form values, counters, loading indicators, or selected tabs.

count = signal(0);
isLoading = signal(false);

3. How do you share state using Angular services?

Use an Angular singleton service with providedIn: 'root' to share state between components. Components inject the same service instance.

@Injectable({ providedIn: 'root' })
export class UserState { user = signal<User | null>(null); }

4. How do you manage state using Signals?

Use signal() to store reactive state, set() or update() to modify it, and computed() to derive values. Angular automatically updates dependent UI.

count = signal(0);
doubleCount = computed(() => this.count() * 2);

5. How do you manage state using RxJS?

Use BehaviorSubject to maintain shared state and expose it as an Observable. Components subscribe to receive state updates.

private usersSubject = new BehaviorSubject<User[]>([]);
users$ = this.usersSubject.asObservable();

6. What is NgRx?

NgRx is a reactive state management library for Angular based on Redux principles. It provides centralized state, predictable updates, and unidirectional data flow.

7. When would you use NgRx?

Use NgRx for large applications with complex shared state, multiple components, asynchronous workflows, and debugging requirements. For smaller applications, services with Signals are often sufficient.

8. What are Store, Action, Reducer, Selector, and Effect?

Concept	Purpose
Store	Centralized application state
Action	Describes an event or state change
Reducer	Updates state based on actions
Selector	Retrieves or derives state
Effect	Handles side effects such as API calls

Component → Dispatch Action → Reducer → Store
                                  |
Component ← Selector ←────────────┘

Action → Effect → Web API → Success/Failure Action

9. Service-based state vs NgRx — when should each be used?

Service-Based State	NgRx
Simple to implement	More structured
Uses Signals or RxJS	Uses Store, Actions, Reducers
Less boilerplate	More setup and boilerplate
Small/medium applications	Large/complex applications
Easier to maintain initially	Better for complex state workflows

Key Point: Start with services and Signals; introduce NgRx when application complexity justifies it.

10. Signals vs NgRx — what is the difference?

Signals	NgRx
Built into Angular	External state management library
Reactive value management	Structured state architecture
Minimal boilerplate	Actions, reducers, selectors, effects
Ideal for local/shared UI state	Ideal for complex global state

Key Point: Signals and NgRx are not mutually exclusive. Modern NgRx also supports SignalStore.

11. What state should be kept on the client versus the ASP.NET Core server?

Keep temporary UI state in Angular, such as filters, selected tabs, and loading indicators. Keep authoritative business data, permissions, and persistent records on the ASP.NET Core server.

Angular Client State
    ├── Selected Category
    ├── Search Filters
    ├── Loading Status
    └── Temporary Form Data
              |
              | HTTP / JSON
              v
ASP.NET Core Web API
    ├── Business Rules
    ├── Authorization
    ├── User Accounts
    └── Persistent Data → SQL Server

Important Interview Revision Points

Concept	Key Point
State Management	Manage application data
Local State	Component-specific data
Shared Service	Share state between components
`signal()`	Reactive state
`computed()`	Derived state
`BehaviorSubject`	RxJS shared state
NgRx	Structured centralized state
Store	Holds application state
Action	Describes an event
Reducer	Updates state
Selector	Reads state
Effect	Handles asynchronous operations
SignalStore	NgRx signal-based state management
Server State	Authoritative business data

Practical Example: Angular + ASP.NET Core

For an article management application:

Signals: Selected category, search text, sorting, loading status.
Angular Service: Share article filters between components.
RxJS: Handle API requests, search debouncing, and cancellation.
NgRx: Manage complex shared state if multiple features require coordinated updates.
ASP.NET Core: Enforce authorization, validate business rules, and persist articles in SQL Server.

Interview priority: Focus particularly on questions 1, 3, 4, 5, 6, 7, 8, 9, 10, and 11.

Key interview takeaway: Use Signals for reactive UI state, RxJS for asynchronous operations, services for shared state, and NgRx for complex application-wide state management.

State Management - Interview Questions