What topics matter most for a senior Angular interview?

RxJS operators and stream design, change detection strategy, performance optimization, state management trade-offs, forms architecture, security, and testing are the areas most frequently probed at the 6+ years level.

How is a 6+ years Angular interview different from a fresher one?

Instead of syntax questions, interviewers present real production scenarios — performance regressions, memory leaks, migration strategy, architecture decisions — and evaluate how you diagnose and reason through them.

Back to Blog

Angular Scenario-Based Interview Questions for Experienced Developers (6+ Years) 2026

Roundexa Team 1 Sep 2026

At 6+ years of experience, Angular interviews stop testing syntax and start testing judgment. Interviewers hand you a production-shaped scenario — a slow dashboard, a memory leak, a migration decision — and watch how you diagnose it. This guide covers every scenario-based question that comes up most often at the senior level. Looking for the hands-on coding tasks instead? See the Angular Coding Round guide.

Architecture & Performance

A large enterprise Angular app has become slow after two years of feature additions. How do you diagnose and fix it?

Start with source-map-explorer or webpack-bundle-analyzer to find bloated bundles, then split routes with lazy loading (loadChildren). Profile with Chrome DevTools' Performance tab to spot excessive change-detection cycles, switch hot components to OnPush, add trackBy to every *ngFor over dynamic data, and replace method calls in templates with pure pipes so they aren't re-evaluated on every check.

A component tree re-renders entirely when one unrelated input changes. How do you debug this?

Use the Angular DevTools profiler to record a change-detection cycle and see which components were checked. Usually the cause is Default change detection cascading top-down from a parent, or a mutated object reference being passed down. Fix by isolating the affected subtree with OnPush and ensuring inputs are replaced immutably, not mutated.

How would you implement micro-frontend architecture in Angular, and what's the trade-off versus a monorepo?

Module Federation (via @angular-architects/module-federation) lets independently deployed Angular apps load each other's code at runtime, enabling independent team release cycles. The trade-off is added complexity — shared dependency versioning, cross-app styling consistency, and harder end-to-end debugging — which a monorepo avoids at the cost of coupled deploys.

You need to render a list of 10,000+ items without freezing the UI. What's your approach?

Use Angular CDK's cdk-virtual-scroll-viewport so only the visible items (plus a small buffer) are rendered to the DOM at any time, regardless of total list size. Combine it with trackBy and OnPush on the row component so scrolling doesn't trigger unnecessary re-renders.

A job-listing style app needs strong SEO. How would you implement Angular Universal (SSR), and what pitfalls should you watch for?

Angular Universal pre-renders pages on the server so crawlers see full HTML instead of an empty shell. The main pitfalls: any direct window/document/localStorage access crashes on the server unless guarded with isPlatformBrowser(), and hydration mismatches occur if server-rendered and client-rendered output differ — so keep initial state deterministic between both.

RxJS & State Management

A search-as-you-type feature fires an API call on every keystroke and older responses sometimes overwrite newer ones. How do you fix it?

Chain debounceTime to reduce call frequency, distinctUntilChanged to skip repeated values, and switchMap instead of mergeMap so each new keystroke cancels the previous in-flight request — eliminating the race condition entirely.

Multiple components independently subscribe to the same HTTP call, causing duplicate network requests. How do you fix this?

Move the call into a shared service, cache the Observable with shareReplay(1) so late subscribers get the last emitted value instead of triggering a new request, and expose it as a single source of truth.

When would you choose NgRx over a simple service with a BehaviorSubject, and when wouldn't you?

NgRx earns its cost in large teams with complex, cross-cutting state, time-travel debugging needs, or heavy async orchestration via effects. For small-to-medium apps or isolated feature state, a BehaviorSubject-based service is simpler to reason about and has far less boilerplate — reach for NgRx only when that boilerplate starts paying for itself.

Users report the app slowing down after navigating between pages repeatedly. You suspect a subscription memory leak. How do you find and fix it?

Check components with manual .subscribe() calls that aren't unsubscribed in ngOnDestroy — a common source is a setInterval or a service-level Observable subscribed to in every component instance. Fix with the takeUntil(this.destroy$) pattern, the async pipe (which auto-unsubscribes), or Angular 16+'s DestroyRef with takeUntilDestroyed().

Change Detection Deep Dive

Q10

Your app uses ChangeDetectionStrategy.Default everywhere and users report lag on a data-heavy dashboard. Walk through migrating to OnPush.

OnPush tells Angular to only check a component when an @Input reference changes, an event originates inside it, or an async pipe emits. Migrating usually breaks two things: code that mutates arrays/objects in place (fix by replacing references, e.g. this.items = [...this.items, newItem]), and manual state changes from outside Angular's zone (fix by calling ChangeDetectorRef.markForCheck() explicitly).

Q11

You see ExpressionChangedAfterItHasBeenCheckedError intermittently in production. What causes it and how do you fix it?

It means a bound value changed after Angular's change detection already checked that view in the same cycle — often caused by updating state inside ngAfterViewInit or a child emitting a change during parent rendering. Fix it by deferring the update with Promise.resolve().then(), setTimeout, or restructuring so the value is correct before the initial check.

Forms & Validation

Q12

Design a dynamic form generated from a backend JSON schema, with cross-field validation like end date after start date.

Build FormGroup/FormControl instances dynamically from the schema using FormBuilder in a loop over the schema's field definitions. Attach a custom group-level validator (not a single-field validator) that reads both controls' values for cross-field rules like date ordering, since a field-level validator can't see its sibling's value.

Q13

How would you implement a multi-step wizard form that preserves state across steps and supports going back without losing data?

Use one parent FormGroup holding a nested FormGroup per step, so all step data lives in a single form model that survives navigation. Drive the visible step with a simple currentStep signal/property rather than routing between separate pages, so Angular never destroys the form controls between steps.

Testing & Security

Q14

How do you unit test a component with a debounced, switchMap-based RxJS stream?

Use fakeAsync and tick() (or the RxJS TestScheduler with marble diagrams) to control virtual time, so debounceTime and async emissions resolve deterministically inside the test instead of relying on real delays.

Q15

Your app binds user-supplied content with [innerHTML] and is vulnerable to XSS. How do you secure it?

Angular sanitizes [innerHTML] by default, but if that sanitization was bypassed with DomSanitizer.bypassSecurityTrustHtml, remove that bypass unless the content is verified server-side. Prefer safe bindings (textContent equivalents, structured rendering) over raw HTML injection wherever possible.

Q16

How do you secure route access based on roles/permissions coming from a JWT token?

Implement a CanActivate (or the functional canActivate guard in modern Angular) that decodes the JWT's claims, checks the required role against the route's data.roles, and redirects to an unauthorized page on failure — evaluated before the route's component is ever instantiated.

Migration Strategy

Q17

You're tasked with migrating a legacy AngularJS app to Angular incrementally. What's your strategy?

Use ngUpgrade to run both frameworks side by side in a hybrid bootstrap, migrating one route or feature module at a time behind a shared UpgradeModule. Downgrade Angular components for use in AngularJS templates (or upgrade AngularJS ones) as each piece moves, so the app stays shippable throughout instead of freezing feature work for a rewrite.

Q18

The team wants to migrate from NgModules to standalone components in an existing large app. How do you plan this with minimal risk?

Migrate leaf components first (they have the fewest dependents), use the Angular schematic (ng generate @angular/core:standalone) to automate conversion, and keep NgModules and standalone components interoperating side by side until the whole tree is converted — never a big-bang rewrite.

Final Thoughts

Senior Angular interviews reward diagnosis over recall — knowing *why* ExpressionChangedAfterItHasBeenCheckedError happens matters more than reciting the RxJS operator list. Practice explaining your reasoning out loud on real scenarios, work through the coding round questions next, and build that muscle with mock interviews at Roundexa.com.

Ready to Practice?

Take a free AI mock interview on Roundexa and get instant, actionable feedback before the real one.

Practice on Roundexa