An Angular Developer specialises in the frontend of business applications. You build standalone components, manage state with signals and RxJS, set up routing with guards and lazy loading, build complex validated forms and integrate REST APIs. You also care about performance, accessibility and unit tests. Many enterprise projects for banking, insurance and healthcare clients in India hire Angular developers in large numbers.
Angular signals RxJS operators Routing and guards Reactive forms Unit testing
Solved for this roleStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
The same card layout with an image, title and actions is copied across ten pages. How would you refactor it?
Create a reusable standalone card component with inputs for title, image and data, and use content projection with ng-content and named slots, like select='[card-actions]', so each page can pass its own buttons. Put shared styles in the component. Add a directive or pipe for repeated formatting. This reduces duplication, keeps styling consistent and makes future design changes a one-place edit.
02
Your app must call different API base URLs for development, staging and production. How do you configure this in Angular?
Use environment files such as environment.ts and environment.prod.ts with fileReplacements in angular.json build configurations, or load a config.json at startup with provideAppInitializer so one build works in every environment. Expose the URL through an InjectionToken and inject it in services or an interceptor. Never put secrets in these files, because everything in the Angular bundle is public.
03
What are injection tokens and when do you need them?
An InjectionToken is a unique key for providing values that are not classes, such as configuration objects, API base URLs or feature flags. You create it with new InjectionToken<AppConfig>('APP_CONFIG'), provide it with { provide: APP_CONFIG, useValue: config }, and read it with inject(APP_CONFIG). Other provider types include useClass to swap implementations, useFactory for computed values and useExisting for aliases.
04
A registration form must check that password and confirm password match. How would you implement this?
Add a cross-field validator at the FormGroup level, because a single control cannot see the other field. The validator reads both values and returns { passwordMismatch: true } when they differ. Show the error under the confirm field when the group has the error and the field is touched. Also validate password strength with a pattern or custom validator, and check it again on the Express backend.
05
What are HTTP interceptors and what are common use cases?
Interceptors sit between HttpClient and the server and can modify every request and response. Modern Angular uses functional interceptors of type HttpInterceptorFn registered through withInterceptors. Common uses are attaching an Authorization header, adding a base URL, showing a global loading indicator, logging, retrying failed requests, refreshing expired tokens and mapping errors to user-friendly messages. Interceptors run in the order they are listed.
06
Two components on different pages need to share the selected city filter. How would you implement it?
Create a root-provided FilterService holding the city in a signal, with methods to update it, and inject the service into both components so they share the same instance. For persistence across reloads or shareable links, sync the value to a query parameter or local storage. If many features need shared state with complex updates, consider NgRx SignalStore or NgRx Store.
07
Write a functional auth guard that redirects unauthenticated users to the login page.
Situation: a new teammate kept writing nested subscribes and could not follow our streams. Task: help him become productive quickly. Action: I drew marble diagrams for map, switchMap and combineLatest, paired with him to refactor one of his components, and shared a short list of the operators we use most with examples. Result: within two weeks his pull requests used flattening operators correctly and he started reviewing others.
09
What is the inject() function and how does it compare to constructor injection?
inject() retrieves a dependency inside an injection context, such as a field initialiser, constructor, factory or functional guard. It removes long constructor parameter lists, works in plain functions like functional guards, interceptors and resolvers, and makes inheritance simpler because subclasses do not need to pass dependencies to super. Constructor injection still works, but modern Angular code and CLI templates favour inject().
10
What does providedIn: 'root' mean and what are other ways to provide a service?
providedIn: 'root' registers the service with the application's root injector, so one shared instance exists and it is tree-shakable, meaning it is removed from the bundle if unused. You can also provide services in a component's providers array, giving each component instance its own copy, in a route's providers for a lazy feature, or in app.config.ts. The provider location decides scope and lifetime.
11
Build a reactive login form with validation using NonNullableFormBuilder.
Send a FormData body with HttpClient post and options reportProgress: true and observe: 'events'. Filter the event stream for HttpEventType.UploadProgress to calculate percent from loaded and total, and for HttpEventType.Response to get the final result. Show a progress bar bound to a signal, allow cancelling by unsubscribing, and validate size and type before upload. For very large files, upload directly to storage with pre-signed URLs.
13
Write a standalone Angular component that displays a list of products using @for.
Angular is a complete, opinionated front-end framework maintained by Google for building single-page applications in TypeScript. It includes routing, forms, an HTTP client, dependency injection, testing tools and a CLI out of the box, so teams follow a consistent structure. React is a UI library and relies on third-party choices for routing and state. Angular's structure suits large enterprise teams and long-lived projects.
15
Configure routes with lazy loading, a child route and a wildcard 404 route.
A signal is a reactive value container: you read it by calling it, count(), and update it with set or update. Angular tracks which templates, computed values and effects read a signal, so when it changes only dependent parts update. Signals give fine-grained reactivity, enable zoneless change detection and are simpler than RxJS for synchronous component state. They are stable and central to modern Angular.
17
What is a service in Angular and why should business logic live there?
A service is a class, usually decorated with @Injectable, that holds logic or data not tied to a single view, such as API calls, authentication, caching or shared state. Keeping this out of components makes components thin and focused on presentation, lets several components share the same data, and makes logic easy to unit test by injecting mock services. Services are created and supplied by Angular's dependency injection system.
18
What are standalone components and why are they now the default?
Standalone components declare their own dependencies in an imports array instead of belonging to an NgModule. Since Angular 19 they are the default, and the CLI generates them without NgModules. They reduce boilerplate, make lazy loading simpler with loadComponent, improve tree shaking and make components easier to understand and test. Applications bootstrap with bootstrapApplication and configure providers in app.config.ts.
19
Write a custom pure pipe that shortens long text with an ellipsis.
Expose the current user's role from an auth service as a signal and read it in the component with a computed value such as isAdmin. In the template, use @if (isAdmin()) to render admin sections and @else for the normal view, or create a small structural directive for permission checks if this repeats. Remember to also protect routes with guards and enforce permissions on the Express API.
21
What are async validators and when do you use them?
Async validators return an Observable or Promise of validation errors, used when validity needs a server check, such as whether a username or email is already taken. Angular runs them only after synchronous validators pass, and the control's status is PENDING meanwhile. Use updateOn: 'blur' or debounce inside the validator to avoid a request on every keystroke, and still enforce uniqueness on the backend.
22
How do parent and child components communicate in Angular?
A parent passes data down through inputs, declared with the input() function or the @Input decorator, and the child notifies the parent through outputs, declared with output() or @Output with an EventEmitter. For two-way binding, model() creates a writable input. A parent can access a child directly using viewChild. For unrelated components, use a shared service holding a signal or a BehaviorSubject.
23
How does JWT-based authentication work end to end in a MEAN application?
The user submits credentials from an Angular form to an Express login route. The server verifies the bcrypt password hash and signs a short-lived access token containing the user id and role, often with a refresh token in an httpOnly cookie. Angular stores the access token in memory, an interceptor attaches it to requests, Express middleware verifies it, and guards control which routes the user can open.
24
How do you read route parameters and query parameters in an Angular component?
Inject ActivatedRoute and read paramMap or queryParamMap, which are Observables, for example route.paramMap.pipe(map(p => p.get('id'))), so the component updates when the same route is reused with a new id. A snapshot gives a one-time value. With withComponentInputBinding enabled in provideRouter, route params, query params and resolver data can bind directly to component inputs, which is the simplest modern approach.
25
Users lose a long half-filled form when they accidentally click a menu link. How would you prevent this?
Add a canDeactivate guard on the form route. The guard checks whether the form is dirty and unsaved through a method or signal on the component, and if so asks the user to confirm leaving with a dialog. Return true to allow or false to stay. Also handle browser refresh and tab close with a beforeunload listener, and consider auto-saving drafts to local storage or the server.
26
Explain the four types of data binding in Angular.
Interpolation, {{ value }}, displays component data as text. Property binding, [src]='imageUrl', sets a DOM or component property. Event binding, (click)='save()', calls a method when an event fires. Two-way binding, [(ngModel)]='name' or [(value)] with a model input, combines property and event binding so the view and component stay in sync. Data flows one way by default, which keeps changes predictable.
27
Write a group validator that checks password and confirm password match.
A Subject is both an Observable and an observer, multicasting values to subscribers but giving late subscribers nothing from the past. BehaviorSubject needs an initial value and gives the latest value to new subscribers, popular for state like the current user. ReplaySubject replays a set number of past values. AsyncSubject emits only the final value on completion. In new code, signals often replace BehaviorSubject for state.
30
Create a counter component with signal, computed and effect.
Situation: we renamed the field amount to totalAmount in the orders API. Task: update the Angular app before release. Action: because our shared Order interface was typed and strict templates were on, the build failed in eleven places, including a payment summary I would have missed. I fixed each usage and added the change to the API changelog. Result: the release went out with no broken screens.
32
What is the new built-in control flow syntax in Angular templates?
Modern Angular uses blocks instead of structural directives: @if with @else if and @else for conditions, @for with a required track expression and an optional @empty block for lists, and @switch with @case and @default. The syntax is built into the compiler, needs no imports, is easier to read and is faster than *ngIf and *ngFor. The CLI provides a migration schematic for older templates.
33
How do built-in and custom validators work in reactive forms?
Validators are functions that take a control and return null when valid or an error object like { required: true } when invalid. Built-ins include Validators.required, email, minLength, maxLength, pattern, min and max. A custom validator follows the same ValidatorFn signature, for example rejecting weak passwords. Group-level validators can compare fields, such as password and confirm password. Errors are read through control.errors and control.hasError.
34
Tell me about a time you had to understand a large unfamiliar Angular codebase quickly.
Situation: I joined a project with over 300 components and a bug fix due in three days. Task: understand the order module fast. Action: I read the routing configuration to map features, used Angular DevTools to inspect the component tree and state, traced the service calls with network logs, and asked a teammate for a thirty-minute walkthrough. Result: I fixed the bug in two days and wrote a short module guide.
35
List the Angular CLI commands you use most often in a project.
Common commands:
ng new shop-app --style=scss
ng serve --open
ng generate component features/product-list
ng generate service core/auth
ng generate guard core/auth --functional
ng generate pipe shared/truncate
ng build --configuration production
ng test
ng update @angular/core @angular/cli
ng update applies official migrations automatically, which makes version upgrades much easier.
36
How do you handle disagreements with a UI designer about how a form should behave?
Situation: a designer wanted validation errors only after submit, but users were missing errors on long forms. Task: reach an agreement quickly. Action: I shared quick screen recordings comparing both approaches and pointed to accessibility guidelines, then proposed validation on blur with a summary at the top on submit. Result: the designer agreed, we tested it with users and the pattern became part of our design system.
37
What is the difference between signal, computed and effect?
signal() creates writable state. computed() derives a read-only value from other signals, is lazily evaluated and memoised, and recalculates only when its dependencies change, for example a cart total from cart items. effect() runs side effects whenever signals it reads change, such as logging or syncing to local storage. Use computed for derived data and keep effects for non-UI side effects, not for setting other state.
38
After deploying the Angular app behind a load balancer, navigating directly to /orders/42 gives a 404. What is wrong?
The Angular router handles that path in the browser, but the web server looks for a real file at /orders/42 and finds none. Configure the server to return index.html for unknown routes: try_files $uri $uri/ /index.html in Nginx, a rewrite rule in IIS or static hosting, or a catch-all route in Express that serves the built index.html after API routes. Alternatively use server-side rendering.
Dependency injection means a class asks for what it needs instead of creating it. Angular's injector creates instances based on providers and supplies them when a component or service requests them, either through constructor parameters or the inject() function. This decouples code, enables singletons, and lets tests or different environments swap implementations, for example providing a mock AuthService in unit tests.
40
Write an Express JWT verification middleware in TypeScript.
Extend the request type with the user.
import jwt from 'jsonwebtoken';
import { Request, Response, NextFunction } from 'express';
export interface AuthRequest extends Request { user?: { id: string; role: string } }
export function auth(req: AuthRequest, res: Response, next: NextFunction) {
const token = req.headers.authorization?.split(' ')[1];
if (!token) return res.status(401).json({ message: 'Unauthorized' });
try {
req.user = jwt.verify(token, process.env.JWT_SECRET!) as AuthRequest['user'];
next();
} catch {
res.status(401).json({ message: 'Token invalid or expired' });
}
}
Frequently asked questions
What does a Angular Developer do?
An Angular Developer specialises in the frontend of business applications. You build standalone components, manage state with signals and RxJS, set up routing with guards and lazy loading, build complex validated forms and integrate REST APIs. You also care about performance, accessibility and unit tests. Many enterprise projects for banking, insurance and healthcare clients in India hire Angular developers in large numbers.
Which skills are tested in a Angular Developer interview?
Expect questions on Angular signals, RxJS operators, Routing and guards, Reactive forms, Unit testing. Most rounds also ask you to explain a project and solve one practical problem live.
How do I prepare for a Angular Developer interview?
Revise Angular Components and Templates, Services, Dependency Injection and Routing, RxJS, Signals and State Management, Angular Forms and HTTP Client first using the topic sheets, practise the questions on this page aloud, then do one full mock interview to practise timing.