Interview questions & answers

Angular interview questions & answers

What are the most common Angular interview questions?

Angular is a TypeScript-based front-end framework by Google for building large, structured single-page applications. It provides a complete platform with components, dependency injection, routing, forms, and HTTP out of the box, and uses RxJS observables for asynchronous data. Interviews test components and modules, data binding, dependency injection, change detection, and the difference between Angular and library-based approaches like React.

Practise in a free AI mock interview Create my free profile

Updated 2026-06-18 · 15 real, commonly-asked questions with answers.

Key takeaways

Angular is a TypeScript-based front-end framework by Google for building large, structured single-page applications.
Core areas to revise for Angular: Components & templates, Data binding, Dependency injection & services, Change detection, RxJS & observables.
This guide answers 15 of the most-asked Angular interview questions — rehearse them in OnJob's free AI mock interview.

Components & templatesData bindingDependency injection & servicesChange detectionRxJS & observablesLifecycle hooksForms (template & reactive)Modules & lazy loading

Top 15 Angular interview questions

Q1.What is the difference between Angular and AngularJS?

AngularJS (version 1.x) is the original JavaScript framework using controllers and two-way binding with a digest cycle. Angular (version 2 and above) is a complete rewrite based on TypeScript and components, with a hierarchical dependency injection system, better performance, and mobile support. They are fundamentally different frameworks despite the shared name.

Q2.What is a component in Angular?

A component is the basic building block of an Angular UI, consisting of a TypeScript class decorated with @Component, an HTML template, and CSS styles. The decorator's metadata includes a selector (how it is used in markup), the template, and styles. Components control a portion of the screen and can nest to form a component tree.

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

A component is a directive with a template; it controls a view. A directive without a template changes the appearance or behavior of an existing element. Structural directives (like *ngIf and *ngFor) add or remove elements from the DOM, while attribute directives (like ngClass and ngStyle) change an element's look or behavior.

Q4.Explain the types of data binding in Angular.

Angular supports interpolation and property binding to send data from the component to the view, event binding to send data from the view to the component (such as click events), and two-way binding with [(ngModel)] which combines property and event binding to keep the model and view in sync. The square brackets denote property binding, parentheses denote event binding, and the banana-in-a-box combines both.

Q5.What is dependency injection in Angular?

Dependency injection (DI) is a design pattern where a class receives its dependencies from an external injector instead of creating them itself. In Angular you mark a class with @Injectable and request it through a constructor parameter; Angular's hierarchical injector supplies a single shared instance (a singleton at the level it is provided). DI makes code modular, reusable, and easy to test.

Q6.What is a service in Angular and why use one?

A service is a class with a focused purpose, such as fetching data, logging, or sharing state, marked with @Injectable so it can be injected. Services keep business logic and data access out of components, promoting reuse and separation of concerns. Because a service provided at the root is a singleton, it is also a natural way to share data across components.

Q7.How does change detection work in Angular?

Change detection is the mechanism that keeps the view in sync with the component's data. By default Angular checks the entire component tree from top to bottom after asynchronous events (clicks, timers, HTTP), using Zone.js to know when to run. The OnPush strategy optimizes this by only re-checking a component when its input references change or an event originates in it.

Q8.What is RxJS and what is an Observable?

RxJS is a library for reactive programming using observables, which Angular uses heavily for asynchronous data such as HTTP responses and events. An Observable is a stream of values over time that you subscribe to in order to receive emissions, and it can be transformed with operators like map, filter, and switchMap. Unlike a promise, an observable can emit multiple values and is lazy and cancellable.

Q9.What is the difference between an Observable and a Promise?

A Promise resolves once with a single value and starts executing immediately. An Observable can emit multiple values over time, is lazy (it does nothing until subscribed), and can be cancelled by unsubscribing. Observables also offer powerful operators for composition. Angular uses observables for streams of events and data, and promises for one-time results.

Q10.What is the difference between ngOnInit and a constructor?

The constructor is a TypeScript class feature used mainly for dependency injection and simple initialization, and it runs when the class is instantiated, before Angular has set up the component's inputs. ngOnInit is an Angular lifecycle hook that runs after Angular has initialized the component's data-bound inputs. Put DI in the constructor and component initialization logic that depends on inputs in ngOnInit.

Q11.What are Angular lifecycle hooks?

Lifecycle hooks are methods Angular calls at specific moments in a component's life, letting you tap into key events. Key hooks include ngOnInit (after first input setup), ngOnChanges (when input properties change), ngOnDestroy (just before the component is destroyed, used for cleanup like unsubscribing), and ngAfterViewInit (after the view and child views are initialized).

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

Template-driven forms are built mostly in the template using directives like ngModel and are simpler for basic forms, with the form logic implicit in the markup. Reactive forms are defined in the component class using FormControl and FormGroup, giving explicit, testable, synchronous control over form state and validation. Reactive forms are preferred for complex, dynamic forms.

Q13.What is an Angular module (NgModule)?

An NgModule is a class decorated with @NgModule that groups related components, directives, pipes, and services into a cohesive unit. Its metadata declares the components it owns, imports other modules it needs, exports what other modules can use, and lists providers. The root AppModule bootstraps the app, though modern Angular increasingly uses standalone components that reduce the need for NgModules.

Q14.What is a pipe in Angular?

A pipe transforms displayed data in a template without changing the underlying value, using the pipe symbol syntax such as date, currency, or uppercase. Pipes are pure by default, recomputing only when their input changes, which makes them efficient. You can create custom pipes by implementing the PipeTransform interface for reusable formatting logic.

Q15.What is lazy loading in Angular?

Lazy loading defers the loading of feature modules or routes until they are actually needed, rather than loading the whole application up front. Configured in the router, it splits the app into smaller bundles that download on demand when a user navigates to a route. This reduces the initial bundle size and speeds up the application's first load.

Free AI mock interview

Practise Angular out loud

Reading answers is step one. Rehearse them in OnJob's free AI mock interview, get instant feedback, then apply to AI-matched jobs in one click.

Start a free mock interview Create my free profile