Angular Interview Questions for 2026: 40+ Questions Across Signals, RxJS, NgRx, Standalone Components (Updated for Angular 18+)

What Angular interview questions actually test in 2026

Angular interview questions in 2026 test four things in this order: whether you understand the framework's reactive model (signals + observables), whether you can write production-grade RxJS, whether you've shipped a real form (template-driven vs reactive is a give-away), and whether you've internalized the post-NgModule architecture (standalone components). The "what is a component" check is the floor. Almost every candidate clears it. The reactive-model check and the RxJS check are where the offers get won or lost.

The 2026 hiring environment has shifted the bar more sharply for Angular than for React. Angular 18 made signals the default reactive primitive in May 2025. Angular 19 shipped incremental hydration in late 2025. Most enterprise codebases migrated their critical paths to signals through 2025 and Q1 2026. Interviewers at banks and insurance carriers (where Angular concentrates) now expect candidates to know the signal API at conversational depth. The candidate who can only talk about BehaviorSubject and ngOnChanges reads as someone who hasn't touched Angular since the version 14 era.

The distribution of question types most new-grad candidates report seeing in their loops:

• 25% RxJS observables and operators
• 20% signals and change detection
• 15% forms (reactive vs template-driven, custom validators)
• 15% NgRx or state management
• 15% core concepts (components, modules, directives, pipes)
• 10% routing and dependency injection

The RxJS slice is the one where most candidates lose points. It's also the slice that disproportionately determines the outcome at any company past Series B.

A typical path for the new grad who lands here: 487 applications across React and Angular roles since May 2025, 14 phone screens, one stuck OA from a Series B fintech, one onsite at a regional bank in Charlotte that asks about NgRx three times in five rounds. The Charlotte bank uses Angular 18. The candidate who came in only knowing React patterns failed the OnPush question 8 minutes into the technical screen. The interviewer was nice tho.

How Angular interview questions differ from React interviews

A React interview tests JSX, hooks, state management (Redux / Zustand / TanStack Query), and rendering performance. An Angular interview tests four additional dimensions that don't show up in React rounds:

RxJS operators. Angular ships RxJS as a peer dependency and uses it everywhere: HTTP, forms, router, signals via toObservable. React doesn't. A candidate who can't pick between switchMap and mergeMap for an HTTP-driven search input is failing the most-asked Angular RxJS question.

Dependency injection. Angular's hierarchical injector tree is the deepest DI system in modern frontend. React has nothing comparable (Context is closer to a global prop). Interviewers ask how providedIn: 'root' differs from a component-scoped provider, when to use inject() vs constructor injection, and what multi: true means.

Change detection. Angular's default strategy walks the component tree on every event. OnPush is the opt-in optimization. Signals integrate with change detection at a per-binding level. React has no equivalent because the virtual DOM and the rendering pipeline are different mental models entirely.

Forms. Angular has two form systems (template-driven and reactive) and the choice is a culture marker. Enterprise codebases standardize on reactive. React has no comparable built-in. The "form library" choice (React Hook Form / Formik) is at the application layer, not the framework layer.

If you've used React from coursework and you're prepping for Angular, the first three weeks of practice should focus on these four dimensions. The component basics translate. The rest does not.

Honest call here: if you only have a weekend before an Angular round, drill RxJS operators and signals first. Those two will let you bluff through 60% of an interview even if the rest is rough.

The 40+ Angular interview questions you should rehearse

What follows is a structured rehearsal set covering the seven categories that show up most. Each question has a sample answer outline. Not a full canned response, but the bones of what a strong answer covers. Adapt the language to your own voice. The structure is the load-bearing part.

Angular core concepts interview questions (6 Q)

Q1. What is Angular and how does it differ from AngularJS?

Angular is the TypeScript-based, component-based rewrite that started at version 2 in 2016. AngularJS (1.x) was JavaScript-based and used $scope and two-way binding by default. They share a name and almost nothing else. Angular is a complete rewrite with a different mental model. In 2026, "Angular" almost always means Angular 18+ unless the codebase has not been touched since 2018.

Q2. What is a component in Angular?

A class with the @Component decorator that combines a template (HTML), styles (CSS), and logic (TypeScript). The decorator wires the class to a selector that the framework matches in HTML to render the component. In standalone mode, the component also declares its imports array directly: other components, directives, and pipes it depends on.

Q3. What's the difference between a component and a directive?

A component is a directive with a template. Directives are classes with the @Directive decorator that modify the appearance or behavior of existing DOM elements. Three kinds: structural directives (*ngIf, *ngFor) that change the DOM layout, attribute directives that change appearance or behavior (ngClass, ngStyle, custom directives), and components which are a special case. The 2026 update: most CLI templates use the new control flow (@if, @for) instead of *ngIf and *ngFor.

Q4. What is the new Angular control flow syntax?

Angular 17 introduced @if, @for, and @switch as built-in template control flow, replacing *ngIf, *ngFor, and *ngSwitch. The new syntax is faster (no structural directive overhead), type-safer, and easier to read. @for requires a track expression (e.g., track item.id) for performance. Angular uses it to identify which items changed across renders. Migrate existing templates with ng g @angular/core:control-flow-migration.

Q5. What are Angular pipes?

Pipes are functions usable in templates with the | syntax that transform data for display. Built-in pipes: date, currency, number, percent, uppercase, lowercase, json, async (the one that auto-subscribes to observables). Custom pipes implement the PipeTransform interface. Pure pipes (the default) only recompute when inputs change reference-equally. Impure pipes recompute on every change-detection cycle and should be used sparingly.

Q6. What's the difference between an NgModule and a standalone component?

NgModules group related components, directives, and pipes into a deployable unit. Each NgModule declares its components, imports other modules, provides services, and exports a public API. Standalone components skip the NgModule layer. The component declares its own imports inline. The Angular CLI has defaulted to standalone since 17. New projects in 2026 should use standalone exclusively. Existing NgModule-based projects migrate incrementally with the @angular/core:standalone schematic.

Angular signals and change detection interview questions (6 Q)

Q7. What is a signal in Angular?

A signal is a synchronous reactive primitive that holds a value and notifies subscribers when it changes. Created with signal(initialValue). Read by calling it as a function: const value = mySignal(). Update with .set(newValue) or .update(fn). Inside a template, reading a signal subscribes the template to it. When the signal changes, only that specific binding re-evaluates.

Q8. What's the difference between a signal and a BehaviorSubject?

Both hold a current value and notify subscribers. The differences: signals are synchronous (no .subscribe, just call them), signals integrate with Angular change detection at the binding level, signals can't emit errors or complete, and signals can't have async operators applied to them directly. BehaviorSubject is an RxJS observable, which means you can pipe it through operators, multicast it, and combine it with other observables. The 2026 pattern: signals for component state, observables for async streams, bridge with toSignal() and toObservable().

Q9. What is computed() in Angular signals?

A signal whose value is derived from other signals. const total = computed(() => price() * quantity()). Computed signals are memoized. The function only re-runs when one of the signals it reads changes. The dependency graph is automatic; you don't list dependencies explicitly. This makes computed signals cheaper than recalculating derived values in templates or in lifecycle hooks.

Q10. What does effect() do?

Runs a side-effect callback whenever a signal it reads changes. effect(() => console.log('count is', count())). Use effects for synchronization with non-Angular code (analytics, third-party libraries, manual DOM tweaks). Effects should not mutate other signals; that pattern is for computed. The Angular team recommends using effects sparingly because they're imperative and can hide reactive logic.

Q11. What is change detection and how does OnPush work?

Change detection is the process Angular uses to decide which DOM bindings need to update. The default strategy walks the entire component tree on every async event (click, HTTP response, setTimeout) and checks every binding. OnPush is the opt-in strategy where Angular only re-checks a component when an @Input reference changes, an event handler fires on the component, or an observable bound via async pipe emits. OnPush components are cheaper to render but require immutable inputs.

Q12. How do signals affect change detection?

When a signal is read inside a template, Angular marks that specific component for check whenever the signal updates. This is finer-grained than OnPush, which still marks the whole component dirty on input changes. In a fully signal-based component, you can opt out of zone.js (the historical engine that drove change detection on every async event) entirely with the provideExperimentalZonelessChangeDetection() provider in Angular 18+. Zoneless apps are still experimental but production-ready for new projects.

Angular RxJS observables interview questions (8 Q)

Q13. What is an Observable in RxJS?

An object that represents a stream of values delivered over time. Subscribe to receive values. Observables are lazy. They don't emit until subscribed. They can emit any number of values (zero, one, infinite), then complete or error. The contract: subscribers receive next(value), error(err), or complete() notifications.

Q14. What's the difference between an Observable and a Promise?

A Promise resolves to a single value. An Observable emits zero, one, or many values over time. A Promise is eager (the work starts when you create it). An Observable is lazy (the work starts on subscribe). A Promise has no built-in cancellation. An Observable cancels when you unsubscribe. For one-shot async work (a single HTTP request), either works. For streams (WebSocket messages, user input events, intervals), only Observables.

Q15. Explain switchMap vs mergeMap vs concatMap vs exhaustMap.

All four map an outer Observable's values to inner Observables, but they handle overlap differently:

• switchMap: cancels the previous inner Observable when a new outer value arrives. The right choice for HTTP requests triggered by user input. If the user types a new search term before the old request resolves, you want to cancel the old one.
• mergeMap: subscribes to every inner Observable in parallel, merges their emissions. Use when order doesn't matter and you want maximum concurrency.
• concatMap: queues inner Observables, runs them sequentially. Use when order matters and one operation can't start until the previous finishes.
• exhaustMap: ignores new outer values while an inner Observable is still running. Use for login buttons. If the user double-clicks, you don't want two login requests.

Picking the wrong operator is the #1 production RxJS bug. The interview question is almost always "you have a search input and an HTTP request, which do you use and why?"

Q16. What is a Subject in RxJS?

A multicast Observable that you can also call .next(), .error(), and .complete() on. Use it when you need to push values into a stream from outside (event bus, manual signal). Four flavors: Subject (no initial value, no replay), BehaviorSubject (initial value, replays the latest on subscribe), ReplaySubject (replays the last N values), AsyncSubject (emits only the final value on complete).

Q17. How do you avoid memory leaks with RxJS subscriptions in Angular?

Three canonical patterns:

1. async pipe in the template. *ngIf="data$ | async as data". Auto-subscribes on mount, auto-unsubscribes on destroy. The preferred pattern.
2. takeUntilDestroyed() (Angular 16+). this.data$.pipe(takeUntilDestroyed()).subscribe(...). Replaces the old takeUntil(destroy$) boilerplate. Requires injection context.
3. takeUntil(this.destroy$). The classic pattern. A Subject that emits in ngOnDestroy. Boilerplate-heavy but works in any version.

Manual subscription.unsubscribe() in ngOnDestroy works but doesn't compose well across multiple subscriptions. Forgetting to unsubscribe is the most-asked RxJS interview question for a reason.

Q18. What's the difference between hot and cold observables?

A cold Observable starts producing values on each subscribe. Each subscriber gets its own independent stream. HTTP requests are cold; each subscriber triggers a separate request. A hot Observable produces values regardless of subscribers. Each subscriber sees the values produced while they're subscribed. WebSocket messages are hot; the server sends them whether or not anyone is listening. Subject is hot. share() and shareReplay() convert cold to hot.

Q19. What does debounceTime do and when do you use it?

Waits for a specified silence period before emitting the latest value. searchInput.valueChanges.pipe(debounceTime(300)) waits 300ms after the user stops typing before emitting. The canonical use case: search-as-you-type inputs, where you want to avoid an HTTP request on every keystroke. Pair with distinctUntilChanged() to skip duplicate emissions and switchMap to make the HTTP request.

Q20. What is combineLatest and how does it differ from forkJoin?

combineLatest emits the latest value from each input Observable whenever any of them emit, after all have emitted at least once. Use for live-data dashboards where multiple streams feed into a derived state. forkJoin waits for all input Observables to complete and emits a single combined value. Use for parallel HTTP requests where you want to wait for all responses before proceeding.

Angular routing interview questions (5 Q)

Q21. How does Angular routing work?

The Router matches URL segments against a route configuration and renders the matched component into a <router-outlet>. Routes are defined as an array of Route objects with path, component, optional children for nested routes, and metadata like data, resolve, and canActivate. The router supports lazy loading via loadComponent (standalone components) or loadChildren (routed modules).

Q22. What are route guards?

Functions or services that decide whether navigation can proceed. canActivate runs before entering a route. canDeactivate runs before leaving (useful for "unsaved changes" prompts). canMatch decides whether the route should even be considered (replaces the older canLoad). canActivateChild runs for nested routes. In 2026 the canonical form is functional guards: export const authGuard: CanActivateFn = (route, state) => inject(AuthService).isLoggedIn(). Functional guards work outside class contexts and compose better than the class-based pattern.

Q23. What is lazy loading and how do you implement it?

Lazy loading defers loading a route's code until the user navigates to it. For standalone components: { path: 'admin', loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent) }. For routed feature modules: { path: 'admin', loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES) }. The router fetches the JavaScript on demand and adds it to the page. Combined with the @defer template syntax (Angular 17+), you can defer in-template content as well.

Q24. How do you pass data to a component via the router?

Four mechanisms: URL parameters (/user/:id read via ActivatedRoute.params), query parameters (?sort=name read via ActivatedRoute.queryParams), route data (static data: { title: 'Admin' } read via ActivatedRoute.data), and resolvers (functions that fetch data before the route activates, exposed via ActivatedRoute.data). For complex data, resolvers are usually the right call because they let the route component assume data is available on init.

Q25. What is RouterLink and how does it differ from a regular href?

routerLink is a directive that triggers a router navigation instead of a full-page reload. <a routerLink="/dashboard">Dashboard</a> updates the URL and renders the matched component in the outlet without a page refresh. A regular <a href="/dashboard"> triggers a server request. Always use routerLink for in-app navigation in an Angular SPA.

Angular forms interview questions (5 Q)

Q26. What's the difference between template-driven and reactive forms?

Template-driven forms put the form structure in the template using [(ngModel)] and #form='ngForm'. The component class is mostly empty. Reactive forms put the structure in the component class using FormGroup, FormControl, and FormBuilder. The template binds to the structure with [formGroup] and formControlName. Reactive forms give you synchronous access to values, type-safe form definitions (Angular 14+), easier unit testing, and dynamic form construction. Most enterprise codebases mandate reactive.

Q27. How do you build a custom validator in Angular?

A validator is a function with the signature (control: AbstractControl) => ValidationErrors | null. Returns null if valid, or an object describing the errors. const banWord: ValidatorFn = (c) => c.value?.includes('forbidden') ? { banned: true } : null. Attach to a FormControl via the validators array. For async validators (HTTP check for username availability), the function returns Observable<ValidationErrors | null> and attaches via asyncValidators.

Q28. What is FormBuilder and why use it?

FormBuilder is an injectable service that reduces the verbosity of building reactive forms. Instead of new FormGroup({ name: new FormControl('', [Validators.required]) }), you write this.fb.group({ name: ['', [Validators.required]] }). The shortened syntax composes better for nested groups and arrays. The Angular 14+ typed form variant is nonNullable.group(...), which gives you a FormGroup<{ name: FormControl<string> }> type instead of the looser default.

Q29. How do you handle a dynamic form (variable number of fields)?

Use FormArray. this.fb.array([this.fb.control('')]). Push controls onto the array with .push(), remove with .removeAt(). The template iterates over .controls with @for or *ngFor and binds each via formArrayName and the index. Dynamic forms are the strongest reason to use reactive forms. Template-driven dynamic forms become unmaintainable past three fields.

Q30. What is ControlValueAccessor?

The interface a custom form control implements to participate in Angular forms. Required methods: writeValue (set the value from the form), registerOnChange (notify the form when the control's value changes), registerOnTouched (notify the form when the control is touched), and setDisabledState. Implement ControlValueAccessor when you build a custom input component (date picker, color picker, autocomplete) that needs to integrate with FormControl and [(ngModel)]. Common but tricky. Interviewers ask about it to filter candidates who've built reusable form components.

Angular NgRx and state management interview questions (5 Q)

Q31. What is NgRx?

The canonical Redux-style state management library for Angular. State lives in a single immutable store. Components dispatch actions (events describing what happened). Reducers (pure functions) compute the next state from the current state and the action. Effects handle async side effects (HTTP, WebSocket, navigation). Selectors are memoized functions that derive view-specific state from the store. The unidirectional flow is: component dispatches action, reducer updates state, selector emits new value, component re-renders.

Q32. What's the difference between a reducer and an effect?

A reducer is a pure function: (state, action) => newState. No side effects, no async work, no random values. An effect is the impure counterpart: it listens for actions, performs async work (HTTP, WebSocket), and dispatches new actions based on the result. The split keeps reducers testable and deterministic. The canonical pattern: dispatch loadUsers → effect calls the API → effect dispatches loadUsersSuccess or loadUsersFailure → reducer updates state.

Q33. What is a selector in NgRx?

A memoized function that derives state for a specific component. const selectActiveUser = createSelector(selectUsers, selectActiveId, (users, id) => users.find(u => u.id === id)). Memoization means the function only re-runs when its input selectors emit new values, which keeps templates cheap to re-render. Compose selectors instead of putting derivation logic in components. That's the single biggest NgRx hygiene rule.

Q34. When should you NOT use NgRx?

When state is component-local (form input, modal open/closed, current tab), use signals or a BehaviorSubject in a service. When the team is fewer than five developers and the state is shared by fewer than five components, a service with signals is lighter than the NgRx ceremony. When the codebase is new and you're not sure about the data flow yet, start with services and only adopt NgRx when the pain becomes obvious. NgRx is overkill for small apps and the right call for large ones.

Q35. What is NgRx Signals Store?

The 2024-released alternative to classic NgRx. Built on Angular signals instead of RxJS streams. Less boilerplate (no actions and reducers as separate concepts; state mutations are method calls). Type-safe by default. Smaller bundle size. Composable via features. New Angular 18+ projects should default to NgRx Signals Store unless the team already has classic NgRx muscle memory or needs time-travel debugging. Classic NgRx still has the larger ecosystem.

Angular standalone components interview questions (4 Q)

Q36. What is a standalone component?

A component that declares its dependencies directly (other components, directives, pipes) without going through an NgModule. Add standalone: true to the @Component decorator and list dependencies in the imports array. The CLI defaults to standalone since Angular 17. New projects in 2026 should use standalone exclusively.

Q37. How do you bootstrap a standalone Angular app?

bootstrapApplication(AppComponent, { providers: [...] }) from @angular/platform-browser. Replaces the older platformBrowserDynamic().bootstrapModule(AppModule) pattern. Configuration like the router, HTTP client, and store modules are passed in the providers array via provider functions: provideRouter(routes), provideHttpClient(), provideStore(reducers).

Q38. How do you migrate an existing NgModule app to standalone?

Use the Angular schematic: ng generate @angular/core:standalone. It runs three migrations in sequence: (1) convert components, directives, and pipes to standalone, (2) remove unnecessary NgModule classes, (3) bootstrap the application without an AppModule. The migration is incremental. You can stop after step 1 or step 2 if your codebase isn't ready for full standalone. Most enterprise migrations land at "all new code is standalone, legacy modules stay until they're touched."

Q39. What's the trade-off of standalone components?

Less boilerplate, clearer dependency graphs, easier lazy loading. The trade-off: each component lists its own imports, which can feel verbose for an app with many shared dependencies. The mitigation is shared barrel files that re-export commonly used directives and pipes as arrays you spread into imports. Net positive in 2026. Every team that has migrated reports the explicit imports are easier to reason about than NgModule's indirection.

Angular dependency injection interview questions (2 Q)

Q40. How does Angular's dependency injection work?

Angular maintains a hierarchical tree of injectors. When a component or directive requests a service (via constructor parameter or inject()), Angular walks up the injector tree until it finds a provider. Services are typically declared @Injectable({ providedIn: 'root' }), making them tree-shakable singletons. Component-scoped providers create a new instance per component. The 2026 default for new services is providedIn: 'root'; component-scoped providers are reserved for stateful services that should not be shared (form helpers, per-page caches).

Q41. What's the difference between inject() and constructor injection?

Constructor injection: constructor(private userService: UserService) {}. inject() function: private userService = inject(UserService);. Both retrieve a service from the injector. inject() is required for standalone functional guards, interceptors, and resolvers because they're not class methods. inject() also works inside @Injectable services and components. The 2026 pattern is to use inject() consistently except in cases where TypeScript's parameter property syntax is genuinely shorter (rare).

Angular vs React comparison interview question (1 Q)

Q42. What's the difference between Angular and React?

The honest answer covers three real differences, not framework-trashing:

1. Opinionation: Angular ships an opinionated stack (router, HTTP client, forms, DI, RxJS). React ships a view library and the application picks the rest (React Router or TanStack Router, fetch or axios or TanStack Query, React Hook Form or Formik, Context or Redux or Zustand). Angular wins on consistency across a large team. React wins on flexibility for a small one.
2. Reactive primitive: Angular's reactive primitive is Observables (RxJS) for async and Signals for sync state. React's reactive primitive is the hook system (useState, useEffect, useMemo). Angular's RxJS is more powerful for complex async logic. React's hook system is simpler for component-local state.
3. Dependency injection: Angular has the deepest DI system in modern frontend. React has Context, which is closer to a global prop than a DI container. Angular's DI shines in large codebases with many cross-cutting concerns (logging, analytics, feature flags). React leans on prop drilling, Context, or a state library.

The interviewer is testing whether you can work on the codebase they have. Don't trash either framework. Show that you understand the trade-offs. Close with: "I'd pick the framework the team is already on. They both ship to production at scale."

How to prepare for an Angular interview (6 steps)

A focused two-week prep plan, scaled for a CS new grad whose frontend background is React from coursework and one Angular project for a course or internship. Adjust if your starting point differs.

One thing worth saying out loud first. If you've been on LeetCode until 3am for three months and your Angular project was the 4-week stretch you put on your resume as "Q1-Q3 2024 built backend services," you don't have a deep Angular foundation. You have surface area. The two-week plan below is built for that exact starting point. Don't pretend otherwise in the interview either. Interviewers at banks have seen the inflated resumes for a year now and they pattern-match on the candidate who can't explain switchMap after claiming "real-time data streams" on their resume.

1. Week 1: build a standalone-component app from scratch. One small app that uses signals for state, reactive forms for a multi-field form, RxJS with switchMap and takeUntil for an HTTP-driven search input, and lazy loading for at least two routes. This forces you to touch every concept the interview will test. Spend 8-12 hours on it.

2. Week 1: drill the eight RxJS operators. map, filter, switchMap, mergeMap, concatMap, combineLatest, debounceTime, takeUntil. Write a small example of each in StackBlitz or a local project. The switchMap vs mergeMap distinction is the #1 RxJS interview question.

3. Week 1: memorize the signals API surface. signal(), computed(), effect(), set(), update(), and the toSignal / toObservable bridges. Build a counter, then a derived-state cart, then an app that bridges an HTTP observable to a signal.

4. Week 2: build a small NgRx feature. One store slice with actions, reducer, effects, and selectors. Todo-list or shopping-cart works. Then build the same feature with NgRx Signals Store and compare. Interviewers in 2026 ask which you'd pick for a new project.

5. Week 2: read the Angular vs React comparison until you can answer it without sounding defensive. Know the three real differences (opinionation, RxJS, dependency injection) and have a 30-second answer that doesn't trash either framework.

6. Week 2: run 2 timed mock interviews. End-to-end, 45 minutes each, on the canonical questions from this guide. Narrate your reasoning out loud while typing code in StackBlitz. If you have a peer who knows Angular, run with them. Otherwise an AI-driven mock interview tool works.

Angular interview format by company type

Angular concentrates in industries where React doesn't dominate. The interview format varies by company type:

Two patterns to notice. First, banks and insurance carriers run the deepest RxJS and NgRx rounds because their core apps are real-time data flows under regulatory constraints. Second, government contractors and large enterprises run the deepest forms rounds because their core apps are workflows with 20-field forms. If you're interviewing for one of these company types, weight your prep accordingly.

The 2026 hiring data: Angular postings concentrate at companies with 1,000+ employees, while React postings spread across company sizes. If your search is biased toward stable, well-benefited roles at large companies, Angular is the funnel-widener.

Angular interview cheat sheet

A one-page reference of the top 20 concepts, organized for the morning-of warmup.

Memorize the top half. The bottom half is the polish.

Common Angular interview mistakes for new grads

The six most-reported mistakes from new-grad Angular interviews in the 2025-2026 hiring cycle:

Forgetting to unsubscribe from observables. The canonical Angular interview question for a reason. Always use async pipe, takeUntilDestroyed(), or takeUntil(this.destroy$). Never leave a raw .subscribe() without cleanup.

Using mergeMap when switchMap is correct. Search-as-you-type with mergeMap makes every keystroke into a parallel HTTP request, and the responses arrive out of order. The user sees results for "ap" appear after results for "apple". switchMap cancels the outdated request. This is the most common production RxJS bug and a common interview gotcha.

Talking about NgModules in a standalone-component shop. If the codebase is on Angular 17+ standalone, talking about declarations and exports reads as out-of-date. Read the codebase's bootstrap file before the interview if you can. If you can't, mention both NgModule and standalone and let the interviewer signal which the codebase uses.

Defending React when asked about Angular. "Angular is too verbose" or "RxJS is overkill" is the wrong tone. Even if you prefer React, the interviewer is asking whether you can work on their Angular codebase. Show that you understand the trade-offs and would commit to whatever stack they use.

Confusing template-driven and reactive forms. Some candidates use [(ngModel)] in a reactive form template or formControlName in a template-driven form. The two systems don't mix. Pick one (reactive in any enterprise context) and stick to its idioms.

Not knowing inject() exists. Functional guards, interceptors, and resolvers in 2026 use inject(), not constructor injection. The candidate who only knows constructor injection reads as someone who hasn't touched Angular since the version 14 era.

One more from watching candidates this year: don't bluff the version number. If you're asked "what version of Angular have you worked with" and you've only touched version 14 in coursework, say version 14. Don't say "the latest" and then trip on @for in the live coding round. The Austin fintech recruiter who flagged this told me they passed on a candidate who lied about Angular 17 experience and couldn't write a @defer block. The candidate who said "version 14 in coursework, doing the version 18 tutorial this week" got the second round.

One thing I'd add from watching new grads do this: don't try to memorize all six the night before. Pick the two that match the round you're prepping for (forms mistakes for a forms-heavy bank role, RxJS mistakes for a real-time dashboard role) and audit your last week's code for those patterns. Fix them in your muscle memory.

Key terms

Signal

Angular's synchronous reactive primitive, introduced in 16 and default in 18+. Holds a value, notifies subscribers on change, integrates with change detection at the binding level. Created with signal(). Read by calling it as a function.

Observable vs Signal

An Observable is an async stream of values from RxJS. A Signal is a sync value container. Use observables for HTTP, WebSocket, and user input streams. Use signals for component-local state. Bridge with toSignal() and toObservable().

Change detection

The process Angular uses to decide which DOM bindings need to re-render. Default strategy walks the whole component tree. OnPush only checks on input reference changes or events. Signals integrate at the per-binding level.

Standalone component

A component that declares its dependencies inline without going through an NgModule. Default in the CLI since Angular 17. The migration path for existing NgModule apps is incremental via the @angular/core:standalone schematic.

Dependency injection (DI)

Angular's hierarchical injector tree resolves service dependencies up the component tree. Services typically use providedIn: 'root' for app-wide singletons. The inject() function is the 2026 default for retrieving services, replacing constructor injection in most cases.

RxJS operator

A function that transforms an Observable into another Observable. The eight most-asked: map, filter, switchMap, mergeMap, concatMap, combineLatest, debounceTime, takeUntil. Picking the right operator is the deepest RxJS interview skill.

Reactive forms

The form system where the structure lives in the component class as FormGroup / FormControl / FormArray. The enterprise default. Gives synchronous access to values, type safety (Angular 14+), and easier unit testing than template-driven forms.

NgRx

The canonical Redux-style state management library for Angular. Splits state into a store, actions, reducers, effects, and selectors. Used in large codebases with shared state across many components. The 2024-released NgRx Signals Store is the lighter-weight alternative for new projects.

Lazy loading

Deferring a route's code until the user navigates to it. Configured via loadComponent (standalone) or loadChildren (modules). Combined with @defer in templates (Angular 17+), you can also defer in-template content.

Related guides

• Technical phone screen tactics: what to expect in the screen that tests these Angular concepts under live observation.
• System design basics for new grads: the next round after the Angular coding screen at most enterprise employers.
• HackerRank tech interview guide: the platform most likely to host your Angular OA.
• CoderPad live coding interview: the platform most likely to host your Angular live round.
• Python interview questions: the other major language new grads interview for, often at the same companies.
• Mock interview practice: how to drill these questions under realistic timing pressure.

About the author: Alex Chen is the founder of InterviewChamp.AI, building AI interview prep for the new-grad CS market and writing about the modern interview gauntlet from the inside.