Angular Interview Questions

This lesson collects commonly asked Angular interview questions, from fundamentals through advanced topics like change detection and signals, with clear, concise answers you can use to prepare.

How to Use These Questions

These questions mirror the structure of this course: fundamentals first, then components and templates, services and DI, routing and forms, RxJS, state management, and performance.

Practice explaining each answer in your own words rather than memorizing it verbatim, interviewers often ask follow-up questions that reward genuine understanding over recitation.

// Example follow-up you might get after answering "what is OnPush?"
// "Given this code, will the view update after clicking the button? Why or why not?"
@Component({ changeDetection: ChangeDetectionStrategy.OnPush })
export class Example {
  @Input() user!: { name: string };
  rename() {
    this.user.name = 'Changed'; // mutated in place
  }
}

A strong answer explains why this specific code would *not* trigger a re-check under OnPush, not just the general definition of OnPush.

How This Lesson Is Organized

Fundamentals -> Components/Templates -> DI/Services
-> Routing/Forms -> RxJS -> State/Signals -> Performance

Questions progress roughly from fundamental to advanced, matching a typical interview's structure.
Each answer is intentionally concise, expand on it in your own words during practice.
See the full extended Q&A list below the cheat sheet for detailed coverage.
Cross-reference any unfamiliar topic with its dedicated lesson earlier in this course.

Interview Questions Quick Reference

A condensed list of frequently asked questions and one-line answers.

Question	Short Answer
What is Angular?	A TypeScript-based framework with components, DI, routing, and forms built in
What is a component?	A class decorated with @Component paired with a template
What is dependency injection?	A pattern where classes receive dependencies instead of creating them
What is change detection?	Angular's process of checking bindings and updating the DOM
What is OnPush?	A strategy that skips checking a component unless specific triggers occur
What is a signal?	A reactive container read as a function and updated with set()/update()
What is RxJS used for in Angular?	Powering HttpClient, forms, and the router with Observables
Standalone vs NgModule?	Standalone components declare their own imports; no module required

Common Mistakes

Memorizing answers word for word instead of understanding the underlying concept well enough to explain follow-ups.
Only preparing definitions without practicing how a concept applies to a small code example.
Skipping fundamentals (components, DI) to focus only on advanced topics like NgRx or signals.
Not preparing at all for practical, whiteboard-style questions (like debugging an OnPush scenario) alongside conceptual ones.

Key Takeaways

Interview questions typically progress from fundamentals through components/DI to advanced topics like signals and performance.
Understanding *why* an answer is true matters more than reciting a definition.
Practice applying concepts to small code snippets, not just describing them abstractly.
Cross-reference any shaky topic with its dedicated lesson before your interview.

Pro Tip

When asked a conceptual question, briefly define the concept, then immediately walk through a tiny, concrete code example, this consistently reads as stronger, more practical understanding than a definition alone.

Extended Angular Interview Q&A

The following questions go deeper than the quick reference table above, with fuller explanations for each answer.

1. What is the difference between a component and a directive?

Every component is technically a directive, an Angular class that can attach behavior to the DOM, but a component always has a template of its own, while a plain directive modifies an existing element without adding new markup. Use a component to render new UI, and a directive to add behavior to markup that already exists.

2. What is the difference between `constructor` and `ngOnInit`?

The constructor is plain TypeScript and runs before Angular has finished setting up the component's inputs. ngOnInit runs once, right after the first round of input binding, making it the correct place for setup logic that depends on @Input() values.

3. Explain Angular's change detection at a high level.

Angular listens for events (via Zone.js, which patches common async browser APIs) and, when one occurs, walks the component tree checking each component's bindings for changes, updating the DOM wherever a bound value actually changed. The OnPush strategy and signals allow Angular to skip checking components that can't have meaningfully changed, improving performance in large applications.

4. What problem does the `OnPush` strategy solve, and what does it require?

OnPush skips checking a component unless a specific trigger occurs: an input changes by reference, an event originates within the component, a signal it reads updates, or it's manually marked for check. It requires treating inputs as immutable, mutating an object in place will not trigger a re-check, since the reference never changed.

5. What is dependency injection, and why does Angular use it so heavily?

Dependency injection is a pattern where a class declares what it needs and an external injector supplies matching instances, rather than the class creating its own dependencies. Angular relies on it for testability (dependencies can be swapped for mocks), for consistent object lifetimes (like singleton services), and for decoupling classes from concrete implementations of what they depend on.

6. What's the difference between `providedIn: 'root'` and providing a service on a component?

providedIn: 'root' registers a tree-shakable, application-wide singleton, every consumer shares one instance. Providing the same service in a component's own providers array creates a separate instance scoped to that component and its children, useful when you deliberately want isolated, non-shared state.

7. What is an Observable, and how does it differ from a Promise?

An Observable represents a stream of values over time and can emit zero, one, or many values, and is cancellable via unsubscribe(). A Promise always resolves to exactly one value (or rejects), starts executing immediately upon creation, and cannot be cancelled. Observables also support a rich library of composable operators that Promises lack natively.

8. When would you use `switchMap` versus `mergeMap`?

switchMap cancels the previous inner Observable when a new value arrives, ideal for search-as-you-type, where only the latest request's result matters. mergeMap runs all inner Observables concurrently without cancelling earlier ones, appropriate when overlapping requests should all complete and you need every result.

9. What are Angular signals, and how do they relate to `computed()` and `effect()`?

A signal is a reactive container for a value, read by calling it as a function and updated with set()/update(). computed() derives a new, read-only signal from other signals, recalculated only when a dependency changes. effect() runs a side effect automatically in response to signal changes, it should not be used to compute new state, that's what computed() is for.

10. What is the difference between template-driven and reactive forms?

Template-driven forms build most of the form's structure in the HTML template using ngModel, relying on FormsModule. Reactive forms build the structure explicitly in TypeScript with FormGroup/FormControl (via ReactiveFormsModule), which scales better to complex, dynamic, or heavily-tested forms.

11. How do route guards work, and what's the difference between `canActivate` and `canDeactivate`?

Route guards are functions the router calls before allowing certain navigation. canActivate controls whether a route can be entered (commonly used for auth checks); canDeactivate controls whether the current route can be left (commonly used for unsaved-changes confirmation). Both can return a boolean or a UrlTree to redirect instead of simply blocking navigation.

12. What is lazy loading, and how do you implement it in modern Angular?

Lazy loading defers downloading a route's code until the user actually navigates to it, reducing the initial bundle size. In modern Angular, this is done with loadComponent (a single standalone component) or loadChildren (a whole feature's routes) using a dynamic import() inside the route configuration.

13. What is the purpose of HTTP interceptors?

Interceptors let you inspect and modify every outgoing request and incoming response passing through HttpClient, useful for cross-cutting concerns like attaching an auth token, logging, or handling specific error status codes globally, without repeating that logic in every service. Modern Angular uses functional interceptors registered with provideHttpClient(withInterceptors([...])).

14. When would you introduce NgRx instead of relying on services with signals?

NgRx is worth its added structure and boilerplate once an application's state is genuinely complex, driven by many different sources, and needs strict traceability or time-travel debugging. For small to medium apps, a well-designed singleton service exposing signals is usually sufficient and far simpler to maintain.

15. How would you improve the performance of a large list rendered with `@for`?

First, ensure a proper track expression (usually a unique id) so Angular can efficiently reconcile changes instead of recreating DOM nodes unnecessarily. For very large lists, use the Component Dev Kit's virtual scrolling (CdkVirtualScrollViewport) to render only the currently visible items. Combining this with the OnPush strategy (or signal-based reactivity) on list-item components further reduces unnecessary checks.