Angular Interview Questions With Model Answers

Angular has changed a great deal across its recent major versions. Signals, zoneless change detection and a new release rhythm mean that interview questions written for an older Angular can give you the wrong preparation. The first thing to find out is which Angular the team actually runs, because a company maintaining a large older application and a team starting fresh on the latest version will ask different questions.

This guide explains the concepts behind the questions you are most likely to get, with short code examples, then lists practice questions for freshers and experienced developers. Facts about Angular’s behaviour and releases come from the official Angular documentation, checked in November 2026. Code samples are illustrative and kept short.

Start with the version

As of November 2026, Angular’s releases page lists three supported major versions: v22 (active, released 3 June 2026), v21 (long-term support) and v20 (long-term support until 28 November 2026). Versions 2 to 19 are no longer supported (Angular docs).

The rhythm has also changed. The same page says Angular now aims for a major release every 12 months, with 4 to 6 minor releases each, and that until v22 the cycle was every six months. Major releases are typically supported for 24 months: 12 months of active support and 12 months of long-term support (Angular docs). Deprecated APIs stay available for at least one major version before removal (Angular docs).

Why this matters in an interview: if you are asked “How would you plan an upgrade?”, a good answer refers to the support window, the deprecation policy and running the official update tooling one major version at a time, with tests after each step.

Concept 1: signals

Expect at least one signals question in any interview for a current Angular role. Angular’s documentation describes a signal as a wrapper around a value that notifies interested consumers when that value changes (Angular docs). Writable signals are updated with set() or update(). Computed signals are read-only, derive their value from other signals and are lazily evaluated and memoised (Angular docs).

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

@Component({
  selector: 'app-basket',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Items: {{ count() }}</p>
    <p>Total: {{ total() }}</p>
    <button (click)="add(25)">Add item</button>
  `,
})
export class BasketComponent {
  private readonly prices = signal<number[]>([]);
  readonly count = computed(() => this.prices().length);
  readonly total = computed(() => this.prices().reduce((sum, p) => sum + p, 0));

  add(price: number) {
    this.prices.update(list => [...list, price]);
  }
}

Questions you may be asked about this code:

• “When does total recalculate?” Only when it is read after prices has changed. Computed values are lazy and cached (Angular docs).
• “Why update() and not push()?” Mutating the array in place doesn’t give the signal a new value. Returning a new array lets dependants know something changed.
• “Does a computed signal track every signal in the class?” No. Only the signals actually read during the derivation are tracked, so dependencies can change between runs depending on which branches execute (Angular docs).

Effects, and when not to use them

A frequent trap question: “How would you keep total in sync with prices?” The weak answer uses an effect to copy one signal into another. Angular’s guidance is to avoid using effects to propagate state changes, because doing so can cause ExpressionChangedAfterItHasBeenChecked errors, infinite loops or extra change detection cycles, and to model dependent state with computed signals (Angular docs). Effects always run at least once and execute asynchronously during change detection (Angular docs), which makes them suitable for side effects such as logging, syncing to local storage or driving a third-party chart or canvas library.

// Avoid: copying state with an effect
effect(() => {
  this.total.set(this.prices().reduce((s, p) => s + p, 0));
});

// Prefer: derive it
readonly total = computed(() => this.prices().reduce((s, p) => s + p, 0));

Two follow-ups to expect. First, untracked(): it reads a signal without registering it as a dependency, so an effect doesn’t re-run when that value changes (Angular docs). Second, linkedSignal: Angular’s documentation describes it as a signal for state that is intrinsically linked to other state. It takes a computation like computed, but it can also be written to (Angular docs). A typical use is a selected option that resets when the list of options changes but which the user can still change.

Concept 2: change detection and zoneless Angular

For years, the standard answer to “How does Angular know when to update the view?” was: Zone.js patches browser APIs and triggers change detection after events, timers and requests. That answer is now out of date for new applications. Angular’s v21 documentation states that zoneless is the default in v21 and later; in v20 it is enabled with provideZonelessChangeDetection() (Angular docs).

In a zoneless application, Angular relies on notifications from its own APIs to decide when to run change detection and on which views. The documented triggers include ChangeDetectorRef.markForCheck (which AsyncPipe calls automatically), ComponentRef.setInput, updating a signal read in a template, and bound template or host listener callbacks (Angular docs).

Good interview points:

• Why go zoneless? The documentation cites better performance, Core Web Vitals, debugging and ecosystem compatibility, and notes that Zone.js adds overhead in payload size and start-up time and triggers change detection more often than needed (Angular docs).
• What breaks when migrating? Code that relied on NgZone.onStable, onUnstable or onMicrotaskEmpty: these never emit in a zoneless application, and NgZone.isStable always returns true. The documentation suggests afterNextRender or afterEveryRender instead (Angular docs). Also, a value changed in a plain class field inside a setTimeout won’t update the view unless something notifies Angular, for example by using a signal.
• Where does OnPush fit? OnPush is not required for zoneless, but Angular calls it a recommended step towards zoneless compatibility for application components (Angular docs). With OnPush, a component reading a signal is marked for update when that signal changes (Angular docs).

If the team runs an older version with Zone.js, you still need the classic answer. Being able to explain both, and how to move from one to the other, is what separates an experienced candidate.

Concept 3: dependency injection

Interviewers use DI questions to check whether you understand where instances come from. Angular’s documentation describes two injector hierarchies: the environment injector hierarchy and element injectors, which are created at each DOM element (Angular docs). When a component asks for a dependency, Angular first walks up the element injector tree through parent components. If none provides it, Angular searches the environment injector hierarchy, and throws an error if it still finds nothing (Angular docs).

@Component({
  selector: 'app-order-editor',
  providers: [OrderDraftService],   // one instance per editor component
  template: `...`,
})
export class OrderEditorComponent {
  private readonly draft = inject(OrderDraftService);
  private readonly api = inject(OrdersApi);   // provided at application level
}

Questions that follow from this:

• “How many OrderDraftService instances exist if three editors are open?” Three, because it is provided in the component’s providers. OrdersApi, provided at application level, is shared.
• “What do optional, self, skipSelf and host do?” They change how resolution searches the hierarchy (Angular docs). For example, optional returns null instead of throwing if nothing provides the token, and skipSelf starts the search at the parent.
• “What is the difference between providers and viewProviders?” Services in viewProviders are only visible inside the component’s own view; content projected with ng-content cannot see them (Angular docs).

Concept 4: RxJS and signals together

Most real Angular applications still use RxJS, especially for HTTP calls and event streams. Expect questions such as “When would you use an observable rather than a signal?” A balanced answer: signals hold current state that templates read synchronously; observables model streams of events over time, such as search input that needs debouncing, cancellation of an earlier request (switchMap) or combining several sources. Many teams convert at the edges, turning an HTTP observable into a signal for the template. Be ready to explain switchMap versus mergeMap, and why unsubscribing matters for long-lived subscriptions.

Older and newer patterns side by side

Interviewers often ask how you would modernise existing code. This table summarises the shifts covered above.

Angular interview questions for freshers

1. What is a component, and what goes in its template, class and styles?
2. Explain property binding, event binding and two-way binding with an example.
3. What is a signal, and how is a computed signal different from a writable one?
4. What is a service, and why inject it rather than create it with new?
5. How does the router map a URL to a component? How do you read a route parameter?
6. How would you call an API and show a loading state and an error message?
7. Name three lifecycle hooks and when each runs.
8. What does the Angular CLI do for you?

Angular interview questions for experienced developers

1. Walk me through how a zoneless application decides when to update the view.
2. When is an effect the right tool, and when is it a code smell?
3. How would you migrate a large Zone.js application to zoneless safely?
4. Design the state for a filterable, paginated table. Which parts are signals, which observables?
5. Explain the injector hierarchy and a bug you have seen caused by providing a service in the wrong place.
6. How do you keep bundle size and start-up time under control? Mention lazy loading and deferred views if you have used them.
7. How would you plan an upgrade across two major versions given the release and deprecation policy?
8. How do you test a component that uses signals and HTTP?

For each experienced question, the interviewer wants a reasoned answer with an example from your own work. If you haven’t used a feature, say so and explain how you would approach it.

Your CV should name the Angular versions you have worked with and what you built, for example “migrated a 40-component app to signals” if that is true. The web developer resume builder has prompts for front-end projects, and the resume templates include layouts that suit technical CVs.

FAQ

Which Angular version should I prepare for?

Ask the employer. If they don’t say, prepare for current Angular: as of November 2026, v22 is the active version and zoneless change detection is the default for new applications from v21.

Are signals replacing RxJS?

Not entirely. Signals handle component state and change detection; RxJS remains common for event streams and HTTP. Interviewers want to hear that you can choose between them.

Do I still need to know Zone.js?

Yes, if the team maintains an older application. Many production applications still run with Zone.js, and migration questions are common.

Is NgModule knowledge still needed?

For maintaining older code, yes. New code mostly uses standalone components, but you may be asked how to migrate a module-based application.

Sources

• Angular versioning and releases, Angular
• Angular Signals (v18 documentation), Angular
• Side effects for non-reactive APIs (v21 documentation), Angular
• Dependent state with linkedSignal, Angular
• Angular without ZoneJS (Zoneless), v21 documentation, Angular
• Hierarchical injectors, Angular