Angular is a full frontend framework widely used in enterprise and IT services companies. These Angular interview questions cover components, modules, data binding and directives for freshers, then services and dependency injection, RxJS, change detection, signals, routing, forms and performance for experienced Angular developers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
Angular is a TypeScript-based framework from Google for building single-page applications, with routing, forms, HTTP and testing built in.
AngularJS (version 1.x) was the original JavaScript framework using controllers and scope, and reached end of life in 2021.
Angular (2 and later) was a complete rewrite based on components, TypeScript and a much faster rendering engine.
Interpolation {{ value }} shows data in the template.
Property binding [property]="value" sets an element or component property.
Event binding (event)="handler()" responds to user actions.
Two-way binding [(ngModel)]="value" combines property and event binding, commonly used in forms.
Directives add behaviour to elements.
Components are directives with a template.
Structural directives change the DOM layout, traditionally *ngIf, *ngFor and *ngSwitch, now replaced by built-in control flow blocks @if, @for and @switch.
Attribute directives change the appearance or behaviour of an element, such as ngClass, ngStyle or a custom highlight directive.
A component controls a part of the screen.
It is a TypeScript class decorated with @Component, which sets its selector (the HTML tag), its template (HTML) and its styles.
The class holds data and methods used by the template.
Applications are a tree of components, and since Angular 17 new components are standalone by default.
NgModules grouped components, directives and pipes and declared what each part of the app could use, which added boilerplate.
Standalone components import their own dependencies directly in the @Component imports array, and the app is bootstrapped with bootstrapApplication and providers.
Standalone is now the default and recommended approach; NgModules remain for older code.
ng new creates a project, ng serve runs the development server, ng generate (ng g) creates components, services, pipes, guards and more, ng build creates a production build, ng test runs unit tests, ng add installs and configures libraries such as Angular Material, and ng update upgrades Angular and its dependencies with automatic migrations.
Pipes transform values for display in templates, written as {{ value | pipeName }}.
Built-in pipes include date, currency, number, percent, uppercase, lowercase, json, slice and async, which subscribes to an observable or promise.
Custom pipes are classes with @Pipe and a transform method, for example formatting a phone number.
@Input lets a parent pass data into a child component through property binding, such as <app-user [user]="selected">. @Output with an EventEmitter lets the child send events to the parent, such as (deleted)="remove($event)". Newer versions offer signal-based input(), output() and model() functions, which work with signals and change detection more efficiently.
Routes map URL paths to components in a routes array, provided with provideRouter. <router-outlet> marks where the routed component appears, and routerLink creates navigation links.
Route parameters (/users/:id) are read from ActivatedRoute or as component inputs.
Child routes create nested layouts, and loadComponent or loadChildren lazy-load routes.
Provide HttpClient with provideHttpClient(), inject it into a service, and call methods such as get, post, put and delete, which return observables of typed data, for example http.get<User[]>("/api/users").
The request runs when something subscribes, usually through the async pipe or toSignal.
Errors are handled with the catchError operator.
A template reference variable, written with a hash such as #nameInput, gives a name to an element or component in the template.
You can then use it elsewhere in the same template, for example (click)="save(nameInput.value)", or access it from the class with viewChild.
On a component it refers to the component instance.
Applied problems, trade-offs and questions about your own projects.
A service is a class that holds logic or data shared across components, such as API calls or user state, marked with @Injectable.
Angular's dependency injection creates and provides instances: providedIn: 'root' creates one shared instance for the app.
Components receive services through the constructor or the inject() function, which keeps them decoupled and easy to test with mocks.
ngOnChanges runs when input properties change, ngOnInit runs once after the first inputs are set and is used for initialisation, ngDoCheck for custom change detection, ngAfterViewInit after the view and child views are created, and ngOnDestroy before the component is removed, where subscriptions and timers are cleaned up. DestroyRef and takeUntilDestroyed simplify cleanup.
RxJS is a library for working with streams of asynchronous data called observables.
Angular uses it for HTTP responses, router events, form value changes and more.
Operators such as map, filter, debounceTime, switchMap and catchError transform streams.
The async pipe subscribes in the template and unsubscribes automatically, which avoids memory leaks.
Template-driven forms are defined mainly in the template with ngModel, which suits simple forms.
Reactive forms are defined in the component class with FormGroup, FormControl and FormBuilder, are strongly typed, easier to test and better for complex, dynamic forms with custom validation.
Most large applications use reactive forms.
A pure pipe, the default, runs only when its input value or reference changes, so it is fast.
An impure pipe (pure: false) runs on every change detection cycle, which is needed when the output depends on changes inside an object or array, but can hurt performance.
The async pipe is impure.
Prefer pure pipes with immutable data.
Guards decide whether navigation can happen: canActivate checks access to a route, for example whether the user is logged in, canMatch decides whether a route matches at all (and prevents lazy loading), and canDeactivate asks before leaving a page with unsaved changes.
Resolvers fetch data before the route activates.
Modern guards are simple functions using inject().
Interceptors sit between HttpClient and the server and can modify every request and response.
Typical uses are adding an authorisation header, showing a global loading indicator, logging, retrying failed requests and handling 401 errors by refreshing tokens or redirecting to login.
Functional interceptors are registered with provideHttpClient(withInterceptors([...])).
Content projection lets a parent pass markup into a child component, which displays it with <ng-content>, optionally with select to create several named slots, like a card with header and body. viewChild gives the class access to an element or component in its own template, while contentChild accesses projected content passed in by the parent.
A Subject is an observable you can push values into; subscribers only receive values emitted after they subscribe.
A BehaviorSubject needs an initial value and gives new subscribers the latest value immediately, which suits current state such as the logged-in user.
A ReplaySubject replays a set number of past values to new subscribers.
Signals now cover many state use cases.
All map each value to an inner observable, such as an HTTP request. switchMap cancels the previous request when a new value arrives, ideal for search boxes. mergeMap runs all inner requests in parallel. concatMap runs them one after another in order, suitable for saving items in sequence. exhaustMap ignores new values while one request is running, which prevents duplicate form submissions.
Parent to child with inputs, child to parent with outputs, and between unrelated components through a shared injectable service holding state in signals or a BehaviorSubject.
Route parameters and query parameters share state through the URL.
For large applications with complex state, a store such as NgRx or NgRx SignalStore centralises it.
System design, deep internals, leadership and tough follow-ups.
By default, Zone.js patches async events and Angular checks every component in the tree after each event to update the view.
With ChangeDetectionStrategy.OnPush, a component is only checked when an input reference changes, an event happens inside it, an async pipe emits or it is marked manually.
OnPush with immutable data greatly reduces work in large apps.
Signals, introduced in Angular 16, are reactive values that notify Angular exactly what changed. signal() holds a value, computed() derives values and effect() runs side effects.
Because Angular knows precisely which views depend on which signals, it can update only those parts, enabling zoneless change detection.
Signal inputs, model() and toSignal() integrate them with components and RxJS.
Use OnPush change detection or signals, lazy load routes and use @defer blocks for heavy components, track items in @for (trackBy) so lists are not re-rendered, avoid function calls in templates and use pure pipes instead, unsubscribe from observables, use standalone components and tree-shakable providers, enable server-side rendering with hydration for faster first load, and analyse bundles to remove large dependencies.
NgRx is a Redux-style state management library.
Components dispatch actions describing events, reducers are pure functions that create new state from the current state and an action, selectors read and derive data from the store, and effects handle side effects such as API calls and dispatch new actions with the results.
It gives predictable state and great devtools; NgRx SignalStore is a lighter, signal-based option.
Angular SSR, added with ng add @angular/ssr, renders pages on the server so users and crawlers get HTML immediately, then hydration reuses that DOM in the browser instead of re-rendering it.
Incremental hydration with @defer blocks hydrates parts of the page only when needed, such as when they scroll into view.
Code must avoid using browser-only APIs during server rendering.
Traditionally Angular used Zone.js to detect when any async task finished and then checked the component tree.
Zoneless mode removes Zone.js: change detection is triggered by signals updating, event handlers in templates, the async pipe and explicit markForCheck calls.
It gives smaller bundles, better performance and clearer debugging, and is enabled with provideZonelessChangeDetection().
Unit tests use TestBed to create components and services with mocked dependencies, run with Jasmine and Karma by default or with Jest or Vitest.
Component harnesses from the CDK test UI components through a stable API.
HttpTestingController mocks HTTP calls, and end-to-end tests use Playwright or Cypress.
Services with pure logic are the easiest and most valuable to test.
Ahead-of-time (AOT) compilation converts templates and components into efficient JavaScript during the build, so the browser does not need the compiler, apps start faster, bundles are smaller and template errors are caught at build time.
Just-in-time (JIT) compilation does this in the browser at runtime and was used for development in older versions.
AOT is now the default for both development and production.
See all Frontend Developer interview questions, covering HTML, CSS, JavaScript, TypeScript, React and more.