Mid Angular Interview Questions

NgRx solves complex application state management problems, especially in large apps where multiple components need shared state.

You should use NgRx when many components read and update global state, require time-travel debugging, offline caching, immutability, or predictable unidirectional data flow.

Small apps do not need NgRx; services or BehaviorSubjects are sufficient.

NgRx uses a predictable data flow:

• Actions: Describe events
• Reducers: Update state immutably
• Store: Holds global state
• Selectors: Retrieve computed data
• Effects: Handle async operations

The flow is: Actions ? Reducers ? Store ? Selectors ? Components ? Effects ? new Actions.

Reactive Forms use TypeScript classes for form control, offer better scalability, testing, dynamic fields, and are suitable for enterprise use.

Template-Driven Forms rely on HTML templates, good for small simple forms but less testable and harder to scale.

Guards run before route activation to allow or block navigation.

Types include: CanActivate, CanDeactivate, CanLoad, CanActivateChild, and Resolve.

They handle security, data preloading, navigation rules, and preventing access to invalid or unauthorized pages.

RouterOutlet is a dynamic placeholder where Angular loads components based on the active route.

Routing parses the URL, matches it with route configuration, runs guards/resolvers, and finally loads the mapped component into the outlet.

Lazy loading loads feature modules only when required.

This reduces initial bundle size, speeds up first load, improves performance, and helps modularize large enterprise applications.

Preloading loads lazy-loaded modules in the background after the main app loads.

Benefits include faster navigation and balanced app performance.

Angular provides built-in strategies like PreloadAllModules and supports custom strategies.

ChangeDetectorRef gives manual control over Angular’s change detection.

Used when working with OnPush, avoiding heavy re-renders, handling updates outside Angular zones, or running performance-sensitive operations.

Schematics automate code generation, enforcing consistent structure across the project.

They generate modules, components, upgrade Angular versions, and apply organization-wide architecture rules.

Shared Module contains reusable components, pipes, and directives and can be imported many times.

Core Module holds global singletons like services, interceptors, and layout components, imported only once.

This separation improves architecture, scalability, and avoids duplicate service instances.