Angular Interview Questions (With Sample Answers)

Most Angular interview questions cluster around the same 10-12 topics: components vs. directives, NgModules, data binding, dependency injection, lifecycle hooks, RxJS, lazy loading, change detection, routing, and the AngularJS-vs-Angular split. This guide covers each one with a concise sample answer and a note on what the interviewer is checking for.

Angular is a TypeScript-based front-end framework maintained by Google. It ships as a full-featured platform — router, forms, HTTP client, testing utilities — rather than a library you assemble yourself. That opinionated structure is exactly why interviewers can probe so many distinct areas in a single session.

Components vs. Directives

Q: What is the difference between a component and a directive in Angular?

Sample answer: A component is a directive with a template. Every component is technically a directive decorated with @Component, which adds a template or templateUrl to the standard directive configuration. Directives without a template (@Directive) modify the behavior or appearance of an existing DOM element — for example, a *ngIf structural directive adds or removes elements, while [highlight] could be an attribute directive that changes a color on hover.

What interviewers check: Whether you understand that components *are* directives, not a separate concept. Candidates who treat them as unrelated usually have surface-level Angular knowledge.

NgModules

Q: What is an NgModule and why does Angular use them?

Sample answer: An NgModule is a class decorated with @NgModule that groups related components, directives, pipes, and services into a cohesive block. It declares which pieces belong to it, imports what it needs from other modules, and exports what it makes available to the rest of the app. Angular's module system makes large codebases manageable by enforcing explicit dependency boundaries.

As of Angular 14+, standalone components can declare their own imports without belonging to any NgModule, which simplifies smaller apps. But NgModules remain relevant in most enterprise codebases you'll encounter.

What interviewers check: Awareness of the module boundary concept and knowledge that standalone components exist as an alternative.

Data Binding

Q: What are the four types of data binding in Angular?

Sample answer:

Two-way binding is syntactic sugar — [(ngModel)] desugars to [ngModel]="value" (property) plus (ngModelChange)="value=$event" (event), which is why it requires importing FormsModule.

What interviewers check: Whether you can explain the banana-in-a-box syntax and why two-way binding is not magic — it's just two one-way bindings composed.

Dependency Injection

Q: How does Angular's dependency injection system work?

Sample answer: Angular's DI system maintains a tree of injectors that mirrors the component tree. When a component or service declares a dependency in its constructor, Angular's injector resolves it by looking up the provider starting at the current injector and walking up the tree. Providers can be scoped at the root (providedIn: 'root' for a singleton), to a specific module, or to a component (creating a new instance per component subtree).

The practical implication: services provided at root are shared application-wide, while services provided at the component level are isolated and destroyed with that component.

What interviewers check: Understanding of injector hierarchy and provider scope — not just "Angular creates the service for you."

Lifecycle Hooks

Q: Walk me through Angular's component lifecycle hooks.

Sample answer: The main hooks in order of execution:

1. ngOnChanges — fires when an input-bound property changes (runs before ngOnInit)
2. ngOnInit — runs once after the first ngOnChanges; use it for initialization logic
3. ngDoCheck — runs every change detection cycle; use sparingly (expensive)
4. ngAfterContentInit / ngAfterContentChecked — after projected content is initialized / checked
5. ngAfterViewInit / ngAfterViewChecked — after the component's view and child views are initialized / checked
6. ngOnDestroy — runs just before the component is destroyed; use it to unsubscribe observables and clear timers

What interviewers check: Knowing ngOnChanges fires *before* ngOnInit, and knowing that ngOnDestroy is where cleanup belongs — not in a random method.

RxJS and Observables

Q: What is an Observable and how does it differ from a Promise?

Sample answer: A Promise handles a single future value and executes immediately. An Observable, from the RxJS library, represents a stream of zero or more values over time and is lazy — it doesn't execute until something subscribes to it. Observables are also cancellable (you can unsubscribe), and they support a rich set of operators (map, filter, switchMap, combineLatest) for composing async logic.

Angular uses Observables throughout — the HttpClient returns them, the Router exposes route params as streams, and forms expose value changes as streams.

What interviewers check: The lazy-vs-eager and single-vs-multiple-values distinction. Follow-up: "When would you use switchMap vs mergeMap?" — switchMap cancels the previous inner observable on each new emission; mergeMap runs all concurrently.

Lazy Loading

Q: What is lazy loading and how do you set it up in Angular?

Sample answer: Lazy loading defers loading a feature module's JavaScript until the user navigates to a route that needs it. This reduces the initial bundle size and speeds up the first meaningful paint. You configure it in the router with a dynamic import:

{
  path: 'settings',
  loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule)
}

With standalone components (Angular 14+), you can lazy-load a component directly via loadComponent.

What interviewers check: The mechanics of the dynamic import() and why it matters for performance. Bonus points: knowing that the Angular CLI automatically creates a separate chunk for lazy-loaded modules during ng build.

Change Detection

Q: What is change detection in Angular, and what is the `OnPush` strategy?

Sample answer: Angular's change detection checks whether the component's data has changed and updates the DOM accordingly. The default strategy (ChangeDetectionStrategy.Default) runs checks on every browser event, timer tick, or async operation — across the *entire* component tree.

OnPush tells Angular to only check a component when:

• An input reference changes (not just a mutation)
• An event originates from within the component
• An observable bound with the async pipe emits

OnPush components are skipped in most change detection cycles, which dramatically reduces the number of checks in large trees. It also nudges you toward immutable data patterns, since Angular won't detect mutations to the same object reference.

What interviewers check: Understanding why default strategy can cause performance problems at scale, and that OnPush requires immutable inputs.

Angular Router

Q: How does Angular's router work, and what is a Route Guard?

Sample answer: The Angular router maps URL paths to components. You define routes in a Routes array and import RouterModule.forRoot(routes) at the app level (or forChild in feature modules). The <router-outlet> directive marks where matched components render.

Route Guards are interfaces that intercept navigation:

• CanActivate — can the user enter this route?
• CanDeactivate — can the user leave this route (e.g., unsaved changes warning)?
• CanLoad — can the lazy-loaded module even be fetched?
• Resolve — pre-fetch data before the route activates

What interviewers check: Whether you know Guards exist and can explain what each one protects. Many candidates know CanActivate but not CanDeactivate.

Angular vs. AngularJS

Q: What is the difference between Angular and AngularJS?

Sample answer: AngularJS (versions 1.x) was the original Google framework, released in 2010, built on JavaScript with a scope/controller/digest-cycle architecture. Angular (version 2+, now at v17+) is a complete rewrite — written in TypeScript, component-based, with a real module system, a hierarchical DI container, and Ahead-of-Time compilation. The two frameworks share a name but almost no code.

Key differences:

AngularJS reached end-of-life in December 2021. Any new project you join will be Angular 2+.

What interviewers check: This is usually a screen for candidates who mix up the two or list "AngularJS" skills on a resume for Angular roles.

Preparing for the Interview Itself

Getting the answers right is half the job. The other half is walking into the room (or video call) knowing who you're talking to and why they're asking what they're asking. If you're trying to prepare for a specific interviewer, Articuler builds a Playbook — background, recent projects, likely focus areas, and conversation starters — in minutes. Pair that with knowing the JavaScript interview questions that often accompany Angular rounds, and use the same approach for any system design interview questions you expect. If you want to get ahead of the formal process entirely, Articuler's semantic search across 980M+ profiles lets you find the hiring manager directly — so you can have a 15-minute conversation before anyone else even applies.

FAQ

What Angular topics come up most in interviews?

Components, directives, NgModules, dependency injection, lifecycle hooks, RxJS/Observables, change detection (OnPush), lazy loading, and the Angular vs. AngularJS distinction appear in the large majority of Angular interviews. Routing and guards are common in mid-to-senior rounds.

Is AngularJS still relevant in 2026?

AngularJS reached end-of-life in December 2021. You may encounter legacy maintenance work on 1.x codebases, but no new projects are built on it. Most interview questions labeled "AngularJS interview questions" are actually testing Angular 2+ knowledge — confirm the version before you prepare.

What is the difference between `switchMap` and `mergeMap`?

switchMap cancels the previous inner observable each time the source emits a new value — useful for type-ahead search where you only care about the latest result. mergeMap runs all inner observables concurrently without cancellation — useful for independent parallel requests where order doesn't matter.

How do I handle unsubscribing from Observables in Angular?

Common approaches: store the subscription and call .unsubscribe() in ngOnDestroy, use the async pipe (which handles subscription/unsubscription automatically), or use the takeUntil operator with a subject that emits in ngOnDestroy.