🔹 Core Architecture & Concepts
Q1: What is Angular’s change
detection mechanism?
A1: It checks component views for changes in data-bound properties.
Traditionally powered by zone.js, but Angular 18+ supports
zoneless detection using signals or manual triggers.
Q2: How does zoneless change
detection improve performance?
A2: It removes global async patching, giving developers fine-grained
control and reducing unnecessary checks.
Q3: Explain Ahead-of-Time (AOT)
compilation.
A3: Templates are compiled at build time, reducing runtime errors and
improving performance.
Q4: What are Angular signals?
A4: Reactive primitives that track dependencies and trigger updates
efficiently, simplifying state management.
Q5: Difference between Ivy and View
Engine.
A5: Ivy (default since Angular 9) generates smaller bundles, improves
debugging, and enables advanced features like partial hydration.
🔹 Components & Templates
Q11: Difference between @Input() and @Output().
A11: @Input() passes data into a child, @Output() emits events to the parent.
Q12: What are standalone components?
A12: Components that don’t require NgModules, introduced in Angular 14.
Q13: How do you load components
dynamically?
A13: Using ViewContainerRef.createComponent().
Q14: Explain ChangeDetectionStrategy.OnPush.
A14: It only checks for changes when inputs change or events occur,
improving performance.
Q15: What is content projection (ng-content)?
A15: A way to insert external content into a component’s template.
🔹 Routing
Q21: What are route guards?
A21: Interfaces like CanActivate, CanDeactivate, CanLoad that
control navigation.
Q22: Explain lazy loading.
A22: Feature modules are loaded only when their route is accessed.
Q23: What are route-level render
modes (Angular 19)?
A23: Per-route configuration for SSR, CSR, or hybrid rendering.
Q24: How does Angular handle
redirects?
A24: Using redirectTo in route config or programmatic
navigation.
Q25: Difference between RouterModule.forRoot() and forChild().
A25: forRoot() sets up app-wide routes, forChild() configures feature module routes.
🔹 Forms
Q31: Difference between
template-driven and reactive forms.
A31: Template-driven use directives (ngModel),
reactive forms use explicit FormControl and FormGroup.
Q32: What are control state events?
A32: Events like valueChanges and statusChanges that track form state.
Q33: How do you implement custom
validators?
A33: Create a function returning { [key: string]: any } | null and attach to a control.
Q34: Explain async validators.
A34: Validators returning a Promise or Observable, useful for
server-side checks.
Q35: Difference between updateOn: 'blur' and updateOn: 'submit'.
A35: Controls when validation and value updates occur.
🔹 Performance & Optimization
Q41: What is partial hydration in
Angular SSR?
A41: Hydrates only necessary DOM parts, improving SSR performance.
Q42: Explain incremental hydration.
A42: Progressively hydrates components, reducing blocking during page
load.
Q43: How do you optimize Angular
apps?
A43: Use OnPush, lazy loading, trackBy, efficient RxJS usage.
Q44: What is tree-shaking?
A44: Removes unused code during build.
Q45: Explain differential loading.
A45: Generates separate bundles for modern and legacy browsers.
🔹 RxJS & State Management
Q51: Difference between Subject, BehaviorSubject, and ReplaySubject.
A51: Subject emits to subscribers, BehaviorSubject stores last value, ReplaySubject replays past values.
Q52: What are linked signals?
A52: Reactive constructs linking signals together for simplified state
flow.
Q53: How do you handle state
management in Angular?
A53: Options include NgRx, Akita, signals, or services with RxJS.
Q54: Difference between NgRx and
signals.
A54: NgRx is Redux-like with actions/reducers, signals are lightweight
reactive primitives.
Q55: Explain mergeMap, switchMap, and concatMap.
A55: Flatten observables differently: mergeMap concurrently, switchMap cancels
previous, concatMap sequentially.
🔹 Testing
Q61: How do you test Angular
components with dependencies?
A61: Use TestBed.configureTestingModule() with mock providers.
Q62: Difference between shallow and
deep testing.
A62: Shallow isolates a component, deep includes child components.
Q63: How do you test async
operations?
A63: Use fakeAsync with tick() or async with whenStable().
Q64: Explain HttpTestingController.
A64: Mocks HTTP requests in unit tests.
Q65: What is snapshot testing?
A65: Captures component output and compares against stored snapshots.
🔹 Advanced Topics
Q71: Explain Angular Universal.
A71: Enables server-side rendering for Angular apps.
Q72: What is Ivy?
A72: Angular’s rendering engine, enabling smaller bundles and advanced
features.
Q73: How does Angular handle i18n?
A73: Using i18n attributes, translation files,
and CLI tools.
Q74: What are Angular schematics?
A74: Code generators for automating tasks.
Q75: Explain Renderer2.
A75: Abstracts DOM operations for cross-platform compatibility.
🔹 Security
Q81: How does Angular prevent XSS?
A81: By sanitizing template bindings and using DomSanitizer.
Q82: What is CSP in Angular apps?
A82: Browser feature restricting resource loading.
Q83: Explain JWT authentication.
A83: Tokens stored client-side, attached via interceptors, validated
server-side.
Q84: Difference between OAuth2 and
OpenID Connect.
A84: OAuth2 handles authorization, OpenID Connect adds authentication.
Q85: How do you secure Angular
routes?
A85: Using route guards and role-based checks.
🔹 Deployment & Tooling
Q91: How do you configure environment
variables?
A91: Using environment.ts files and CLI build configs.
Q92: What is the role of Angular CLI
builders?
A92: Customize build and deployment processes.
Q93: Difference between ng build --prod and ng serve.
A93: ng build
--prod creates
optimized bundles, ng serve runs dev server.
Q94: How do you enable PWA features?
A94: Using ng add
@angular/pwa.
Q95: Explain Angular service workers.
A95: Enable offline caching and background sync.
