Angular Interview Questions and Answers

Angular interviews now test whether you can explain framework mechanics and make sound engineering choices, not whether you can recite decorator names. I compiled the component examples and ran the Signals, RxJS, and dependency injection checks against Angular 22.1 so the answers below match the supported framework rather than an older AngularJS mental model.

How to use these Angular interview questions

Start with the short answer, then add the mechanism and one boundary from your own project. An interviewer can tell when a definition has no engineering decision behind it.

Angular 22 is the active major release as of July 2026. Angular 21 and 20 are in long-term support, while Angular 2 through 19 are unsupported, so name the version context when an answer depends on modules, Zone.js, or an older test runner.

Angular fundamentals

These questions establish whether you understand what Angular compiles and how an application is assembled. Keep Angular and AngularJS separate from the start.

1. What is Angular?

Angular is a TypeScript-based web framework for building client and server-rendered applications with components, templates, routing, forms, dependency injection, HTTP utilities, rendering support, build tooling, and testing integration.

2. How is Angular different from AngularJS?

AngularJS is the 1.x framework built around JavaScript, controllers, scopes, and digest-cycle change detection. Modern Angular starts at version 2, uses TypeScript and components, and has a different compiler, dependency injection system, rendering architecture, and release policy.

3. What is a standalone component?

A standalone component declares its own template dependencies through the imports field instead of requiring declaration in an NgModule, and components use this model by default in Angular 19 and later unless standalone is set to false.

4. What belongs in an Angular component?

A component joins a TypeScript class with a selector, template, and optional styles. The class owns presentation state and event handlers, while services should hold shared data access or business behavior that does not belong to one view.

5. What does the Component decorator do?

The Component decorator supplies metadata that Angular’s compiler needs, including the selector, template, imports, change detection strategy, and styles.

It does not create the component by itself. Angular instantiates the compiled definition when the component enters a rendered view.

6. What is the difference between a template expression and a statement?

A template expression reads a value, as interpolation and property binding do.

A template statement responds to an event and can call a method or assign a value. Both execute in the template context and intentionally expose fewer language features than arbitrary JavaScript.

7. How does built-in template control flow work?

Use @if, @for, and @switch blocks to choose or repeat template fragments. In an @for block, the track expression gives Angular a stable identity for each item, which lets it reuse the appropriate document object model nodes when the collection changes.

8. What are the four forms of data binding?

Interpolation renders text, property binding sends a value from the component to an element or directive, event binding sends an event back to the component, and two-way binding combines property and event flow. Two-way binding is convenient for form controls, but explicit one-way flow is easier to trace in larger components.

9. Is NgModule obsolete?

No. NgModule remains supported and matters in established applications and libraries.

Standalone APIs reduce module ceremony for new code, so a careful answer explains both models and avoids proposing a full rewrite solely to remove modules.

10. What does Angular CLI provide?

Angular Command Line Interface (CLI) creates projects, generates artifacts, serves development builds, runs tests, builds production bundles, and applies supported update migrations. The CLI and Angular core share major version numbers, which makes compatibility easier to reason about.

A compiled standalone component example

This component uses the current standalone default, Signals, computed state, built-in control flow, and a lazy route. I checked the TypeScript with version 7.0.2 and parsed the template with Angular compiler 22.1.0.

import { Component, Injectable, computed, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Routes } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class InterviewApi {
  private readonly http = inject(HttpClient);

  loadQuestions() {
    return this.http.get<readonly string[]>('/api/questions');
  }
}

@Component({
  selector: 'app-score-card',
  template: `
    <button (click)="score.update(value => value + 1)">Add point</button>
    @if (passed()) {
      <p>Interview practice complete.</p>
    }
    <ul>
      @for (topic of topics; track topic) {
        <li>{{ topic }}</li>
      }
    </ul>
  `,
})
export class ScoreCardComponent {
  readonly score = signal(0);
  readonly passed = computed(() => this.score() >= 3);
  readonly topics = ['signals', 'dependency injection', 'RxJS'];
}

export const routes: Routes = [
  {
    path: 'score',
    loadComponent: () =>
      import('./interview-snippets').then(module => module.ScoreCardComponent),
  },
];

Signals, RxJS, and dependency injection

Modern Angular gives you more than one reactive primitive. A strong interview answer selects one according to the state source, timing, and ownership instead of declaring a universal winner.

11. What is an Angular Signal?

A Signal is a value container that notifies consumers when its value changes.

Calling the Signal reads its value, while set() replaces a writable value and update() derives the next value from the previous one. Angular tracks template reads so it can schedule the affected view for an update.

12. What is a computed Signal?

A computed Signal derives a read-only value from other Signals.

Angular evaluates it lazily, caches the result, and invalidates it when a tracked dependency changes. Use computed() for derived state, not effect(), because effects are intended for work outside the reactive state graph.

import { computed, signal } from '@angular/core';

const score = signal(1);
const doubled = computed(() => score() * 2);
score.set(3);
console.log(`signal score=${score()} doubled=${doubled()}`);

13. When should you use Signals instead of RxJS?

Signals fit synchronous state that a component or service can read at any time, especially view state and derived values.

RxJS fits asynchronous event streams that need cancellation, time-based operators, multicasting, or coordination across several sources. Angular provides interop utilities, so the decision does not need to be permanent.

14. What is an Observable?

An Observable represents a stream that can emit zero or more values over time and then complete or fail.

It is lazy unless an operator or source makes it hot, and a subscription starts consumption. Angular’s HTTP client returns cold Observables that send a request for each subscription.

15. Why is switchMap common in search interfaces?

switchMap unsubscribes from the previous inner Observable when the outer source emits again. That cancellation prevents a slower response for an older query from replacing a newer result, although the server may continue work after the browser aborts the request.

import { Subject, of, switchMap } from 'rxjs';

const queries = new Subject();
queries.pipe(switchMap(query => of(`result:${query}`))).subscribe(value => {
  console.log(`rxjs ${value}`);
});
queries.next('angular');

16. What is dependency injection in Angular?

Dependency injection lets a consumer request a token while an injector decides how to create or retrieve the value. The separation makes services replaceable in tests and allows provider scope to control whether a value is shared at the application, route, environment, or component level.

17. How does inject() differ from constructor injection?

Both resolve dependencies from the active injection context.

inject() works in field initializers, provider factories, guards, and other supported contexts, while constructor parameters make a class’s dependencies visible in its signature. Choose the style your team can review consistently and do not call inject() from arbitrary asynchronous callbacks.

18. How does Angular resolve providers?

Angular first searches the relevant element injector hierarchy, then the environment injector hierarchy.

Resolution modifiers such as self, skipSelf, and optional narrow or relax that search. A component-level provider creates an instance scoped to that component subtree, which can be useful or surprising when you expected an application singleton.

import {
  InjectionToken,
  createEnvironmentInjector,
  inject,
  runInInjectionContext,
} from '@angular/core';

const API_URL = new InjectionToken('API_URL');
const injector = createEnvironmentInjector([
  { provide: API_URL, useValue: '/api/questions' },
]);
const value = runInInjectionContext(injector, () => inject(API_URL));
console.log(`inject token=${value}`);
injector.destroy();

HTTP, routing, and forms

These APIs sit at application boundaries, where cancellation, validation, and authorization matter as much as syntax. Explain what Angular handles and what the server must still enforce.

19. How do you configure HttpClient in a standalone application?

Register it with provideHttpClient() in the application providers, then inject HttpClient into a service or other supported context. HttpClient parses JSON by default and returns typed Observables, but a TypeScript response type does not validate the server payload at runtime.

For a focused implementation, see the CodeForGeek guide to making HTTP calls with Angular HttpClient.

20. What is an HTTP interceptor?

An interceptor transforms outgoing requests or incoming events.

Common uses include authentication headers, correlation identifiers, retry policy, and centralized error mapping. Keep interceptors small because hidden mutation across a long chain makes request behavior difficult to trace.

21. How is a Promise different from an Observable?

A Promise settles once and starts when it is created.

An Observable can emit several values, can be composed with stream operators, and usually does nothing until subscribed. Unsubscribing can cancel supported work such as an HttpClient request, while a Promise has no equivalent built-in cancellation contract.

22. What is the AsyncPipe used for?

AsyncPipe subscribes to an Observable or Promise, exposes the latest value to the template, requests a view check when the value changes, and unsubscribes when the view is destroyed. It reduces manual subscription cleanup, though repeated pipe use on a cold Observable can still create repeated work.

23. Reactive forms or template-driven forms?

Reactive forms define the control model in TypeScript and suit complex validation, dynamic forms, and focused tests.

Template-driven forms reduce setup for small forms but move more behavior into template directives. The user experience, validation complexity, and team testing style should decide.

24. What does lazy loading change?

Lazy loading moves a route’s component or child routes into a separate chunk that the browser can request when navigation needs it. It reduces the initial bundle only when the split code is not immediately required, and too many tiny chunks can add request and coordination overhead.

25. What is a route guard?

A route guard controls client-side navigation based on application state. The server must enforce permissions for every protected operation because a user can alter browser code or call an API directly, which makes the guard a user-flow feature rather than an authorization boundary.

26. How would you deploy an Angular application?

Build with the production configuration, publish the generated browser assets to a static host or serve the server bundle when using server-side rendering, then configure fallback routing and cache headers. The Firebase Hosting deployment walkthrough shows the static-hosting route.

Change detection, rendering, and performance

Performance answers should begin with a measurement and identify the work that repeats. Naming OnPush or lazy loading without a profiler trace is not a diagnosis.

27. How does Angular change detection work?

Angular evaluates template bindings to update the rendered view when application state may have changed.

Signals can identify dependent consumers, while event handling, input changes, async notifications, and explicit APIs can also schedule checks. The exact trigger set depends on whether the application uses Zone.js or zoneless change detection.

28. What does OnPush change detection do?

OnPush lets Angular skip a component subtree unless a relevant input changes, an event runs in that subtree, a consumed Signal changes, AsyncPipe receives a value, or code marks the view. Mutating an input object in place can leave the view stale because the input reference did not change.

29. What is zoneless change detection?

Zoneless Angular does not depend on Zone.js patching browser APIs to infer that state may have changed.

The application uses Angular notifications such as Signal updates, input changes, events, and change detector APIs. It can reduce broad checks, but migration requires testing code that previously relied on patched async behavior.

30. What are server-side rendering and hydration?

Server-side rendering produces HTML on the server for an initial request.

Hydration attaches Angular behavior to that existing markup in the browser instead of rebuilding the page from nothing. The approach can improve initial display and indexing, but it adds server cost, serialization constraints, and mismatch debugging.

31. How do you prevent subscription leaks?

Prefer AsyncPipe or framework cleanup utilities such as takeUntilDestroyed() when the subscription follows an Angular lifecycle.

Manual subscriptions need an explicit owner and teardown. Completion is not guaranteed for long-lived streams, so relying on it without checking the source leaves callbacks active after a component disappears.

32. What is ahead-of-time compilation?

Ahead-of-time (AOT) compilation turns Angular templates and metadata into executable JavaScript during the build.

It catches template errors before deployment and avoids shipping the template compiler to the browser. Production Angular CLI builds use AOT by default.

Testing and debugging questions

Angular 22 CLI projects use Vitest for unit tests by default. Established projects may still use Karma or another runner, so separate the test APIs from the runner in your answer.

33. How do you test a component with dependencies?

Configure the component and provider replacements in TestBed, create the fixture, drive inputs or user events, then assert rendered output and observable behavior. Replace network boundaries with Angular’s HTTP testing utilities rather than calling a live service from a unit test.

34. How do you debug ExpressionChangedAfterItHasBeenCheckedError?

Find the binding that changed after Angular completed its verification pass, then trace the lifecycle hook or synchronous callback that changed it. Move the calculation earlier, derive it with computed state, or redesign the data flow instead of calling detectChanges() merely to suppress the error and hide its cause.

35. How do you investigate a slow Angular view?

Record a reproducible interaction in Angular DevTools and the browser performance panel, then inspect change-detection frequency, long tasks, repeated subscriptions, list identity, and bundle loading. Optimize the measured source, rerun the same interaction, and keep the change only when the trace improves.

Scenario-based Angular interview questions

Scenario questions reveal whether you can connect several APIs under constraints. State what you would inspect before recommending a change.

36. A typeahead shows results for an older query. What do you change?

Confirm that responses arrive out of order, then compose the input stream with debouncing, distinctUntilChanged(), and switchMap(). Keep loading and error states inside the same flow so cancellation does not leave stale interface state behind.

37. A dashboard checks too many components on every update. What do you do?

Profile the interaction first. Then isolate frequently changing state, use stable list tracking, remove duplicate subscriptions, derive view values with computed Signals, and apply OnPush where immutable input flow supports it.

Consider zoneless change detection only after tests cover the affected async paths.

38. How would you migrate an NgModule application to standalone APIs?

Use Angular’s supported migrations, convert leaves before shared roots, and keep tests passing after each batch.

Modules and standalone components can coexist, so there is no need for a single risky rewrite. Measure build output and startup behavior instead of assuming the migration changes performance.

39. A route guard blocks the page, but the API still returns private data. What failed?

The backend authorization check is missing or incomplete.

Keep the guard for navigation experience, but validate the user’s identity and permissions on the server for every protected request. Client-side hiding cannot protect server data.

40. How should you answer an architecture question you cannot finish?

State the known constraints, name the artifact you would inspect, and choose the smallest experiment that separates the leading explanations instead of guessing an API name and defending it.

Angular interview answer checklist

A concise answer can show depth when it includes the mechanism and the boundary. Use this checklist while practicing aloud.

• Name the Angular version when support or defaults affect the answer.
• Explain what triggers the behavior, not only what the API is called.
• Give one example drawn from code you can defend.
• State where the recommendation stops fitting.
• For performance, security, and migration questions, name the evidence you would inspect first.

Frequently asked questions

Preparation choices depend on the role and the application’s age. These answers keep the scope practical.

The answer that earns the follow-up

Define the API, explain the mechanism, and name the condition that changes your choice. Then return to the compiled example and practice defending why Signals, RxJS, dependency injection, and lazy routing each handle a different part of the application.