Learn. Practice. Feel prepared.
50 Modern Angular Interview Questions and Answers
Master modern Angular development through practical interview questions, reactive programming challenges, and real-world debugging scenarios. Strengthen your understanding of Signals, RxJS, dependency injection, standalone architecture, and efficient change detection while measuring your progress with instant scoring.
Top Angular Interview Questions for Freshers and Experienced
50 Questions
Easy · Medium · Hard
Try answering from memory, then check the reference answer and rate yourself. Your notes are optional and are not automatically graded.
1 What distinguishes modern Angular applications from applications built primarily around NgModules? easy
standalone-componentsangular-architecturemodern-angular
Reference answer
Modern Angular emphasizes standalone components, functional APIs, Signals, and improved template control flow.
Components can declare their own dependencies without requiring an NgModule.
This simplifies application structure, lazy loading, and feature-level dependency management.
Did you know it?
2 What is an Angular Signal, and how is its value read and updated? easy
signalsreactivitystate-management
Reference answer
A Signal is a reactive value container that notifies Angular when its value changes.
Create writable state with signal(), read it by calling the signal as a function, and modify it using set() or update().
For example, count.update(value => value + 1) increments a numeric signal.
Did you know it?
3 What is the purpose of computed() in Angular Signals? easy
computed-signalsderived-statereactivity
Reference answer
computed() creates a read-only Signal whose value is derived from other reactive values.
Angular tracks dependencies automatically and recalculates the value lazily when required.
It is useful for derived state such as filtered lists, totals, and validation summaries.
Did you know it?
4 How does a standalone component declare dependencies used in its template? easy
standalone-componentscomponent-importstemplates
Reference answer
A standalone component lists required components, directives, and pipes in its imports array.
For example, a component using NgClass can import that directive directly from @angular/common.
This makes template dependencies explicit and supports modular application design.
Did you know it?
5 What is dependency injection in Angular? easy
dependency-injectionservicesinject
Reference answer
Dependency injection allows Angular to create and supply dependencies instead of components constructing them manually.
Services can be registered through providedIn or injector-level providers.
Components commonly retrieve dependencies using constructor injection or the inject() function.
Did you know it?
6 What is the difference between an Observable and a Promise in Angular applications? easy
rxjsobservablespromises
Reference answer
A Promise represents one eventual result, while an Observable can represent zero, one, or multiple values over time.
Observables support operators, composition, and cancellation through unsubscription.
Angular HttpClient commonly exposes Observables for HTTP operations.
Did you know it?
7 What does the OnPush change detection strategy do? easy
onpushchange-detectionperformance
Reference answer
OnPush allows Angular to skip checking eligible component subtrees when no relevant notification requires an update.
Checks can be triggered by new template-bound inputs, events, Signals read in templates, or explicit change detection notifications.
It helps reduce unnecessary work in component-heavy applications.
Did you know it?
8 What problem does the @for tracking expression solve? easy
control-flowfor-loopdom-performance
Reference answer
The track expression identifies items across collection updates so Angular can reuse existing DOM elements efficiently.
For example, @for (user of users; track user.id) tracks elements by stable identifiers.
Good tracking reduces unnecessary DOM creation and preserves relevant element state.
Did you know it?
9 What is the role of provideRouter() in a standalone Angular application? easy
angular-routerstandalonerouting
Reference answer
provideRouter() registers Angular Router services and route configuration through application-level providers.
Routes map URL paths to components, lazy-loaded features, or other routing behavior.
It replaces the need to import RouterModule.forRoot() into a root NgModule.
Did you know it?
10 What is the purpose of the async pipe when displaying Observable data? easy
async-piperxjstemplates
Reference answer
The async pipe subscribes to an Observable or Promise and exposes its latest resolved value to the template.
It manages subscription cleanup when the view is destroyed or the bound source changes.
It also notifies Angular that the view should be checked when new values arrive.
Did you know it?
11 A computed Signal reads one of two Signals depending on a boolean flag. Does Angular track both dependencies permanently? medium
computed-signalsdependency-trackingreactivity
Reference answer
No. Computed Signals track only the reactive dependencies actually read during their latest evaluation.
When the flag changes, Angular can recalculate the computed value and establish a different dependency set.
This dynamic dependency tracking prevents unrelated Signals from invalidating the computation.
Did you know it?
12 A developer modifies an array stored in a Signal using push(), but the template does not update. Why? medium
signalsimmutabilitychange-detection
Reference answer
Mutating an array in place does not automatically notify the Signal that its value has changed.
Writable Signals use equality checking when values are set or updated, with reference equality by default.
Create a new array reference, such as items.update(current => [...current, newItem]), to trigger reactive updates.
Did you know it?
13 When should effect() be used instead of computed() in Angular? medium
signalseffectsderived-state
Reference answer
Use computed() to derive values from reactive state without introducing side effects.
Use effect() when changes must synchronize with an external system, such as logging or an imperative browser API.
Avoid using effects to copy values between Signals when the same relationship can be represented through computed state.
Did you know it?
14 Why can updating Signals inside an effect create difficult-to-debug reactive behavior? hard
signal-effectsreactive-loopsstate-design
Reference answer
An effect that reads and writes related reactive state can introduce feedback loops or unnecessary synchronization.
It may also create timing problems when values are propagated through multiple effects.
Prefer computed values for derived state and explicit event handlers for intentional state transitions.
Explain the difference between deriving state and performing side effects.
Did you know it?
15 How would you design a component that receives a reactive input and exposes a transformed value without manually implementing ngOnChanges? medium
signal-inputscomputedcomponent-api
Reference answer
Use input() to declare a Signal-based input and computed() to derive the transformed value.
For example, a price input can feed a computed Signal that formats a display label.
Angular automatically tracks input changes and invalidates dependent computations.
Did you know it?
16 What is the difference between model() and input() when designing reusable Angular components? medium
model-inputssignal-inputstwo-way-binding
Reference answer
input() declares an input that the receiving component reads without directly modifying it.
model() creates a writable model input with a corresponding change output, supporting two-way binding.
Use model() for controls such as custom switches or editable values, and input() for ordinary one-way data flow.
Did you know it?
17 How can toSignal() introduce unexpected behavior when converting an HTTP Observable into a Signal? hard
to-signalrxjs-interophttpclient
Reference answer
toSignal() subscribes to the Observable when created, which can immediately trigger an HTTP request.
Because HTTP responses are asynchronous, the Signal may initially contain undefined unless an initial value is supplied.
Create the conversion once in a suitable injection context rather than repeatedly creating subscriptions during rendering.
Did you know it?
18 How would you decide whether to use Signals or RxJS for a feature involving live search, filters, and API requests? hard
signalsrxjsreactive-architecture
Reference answer
Signals work well for synchronous UI state such as selected filters, input values, and derived display state.
RxJS is useful for asynchronous streams requiring debounce, cancellation, retries, and event composition.
Combine them through Angular's RxJS interoperability utilities when the feature benefits from both models.
Did you know it?
19 A service provided in root unexpectedly has separate instances in different parts of an Angular application. What could cause this? medium
dependency-injectioninjector-hierarchyservice-scope
Reference answer
The service may also be registered in component providers or route-level providers, creating additional instances in child injectors.
Angular resolves dependencies from the nearest matching provider in the injector hierarchy.
Inspect provider declarations and move shared singleton state to an appropriate common injector.
Did you know it?
20 What is the difference between EnvironmentInjector and ElementInjector in modern Angular? hard
environment-injectorelement-injectordependency-injection
Reference answer
EnvironmentInjector manages providers associated with application environments, routes, and other environment-level scopes.
ElementInjector represents dependency resolution associated with components and directives in the element hierarchy.
Understanding both helps explain service visibility, overrides, and instance lifetimes.
Did you know it?
21 Why can calling inject() inside an ordinary component method produce NG0203? medium
injectinjection-contextng0203
Reference answer
inject() requires an active Angular injection context, such as a constructor, field initializer, or provider factory.
An ordinary method invoked later does not automatically have that context.
Retrieve the dependency during initialization or explicitly use runInInjectionContext() with an appropriate injector.
Did you know it?
22 How would you provide different API configurations to two lazy-loaded features without duplicating the entire application? hard
injection-tokenroute-providerslazy-loading
Reference answer
Define an InjectionToken representing the API configuration and provide feature-specific values at route boundaries.
Services resolved within each route's injector can receive the corresponding configuration.
Keep globally shared services separate when their behavior must not depend on route-specific settings.
Did you know it?
23 A search box sends an HTTP request for every keystroke, and older responses sometimes replace newer results. How would you fix it? medium
rxjsswitchmapsearch
Reference answer
Create an input stream using valueChanges or another reactive source and apply debounceTime and distinctUntilChanged.
Use switchMap to switch to the latest HTTP request and unsubscribe from the previous one.
Handle loading and error states so canceled or failed requests do not leave the interface inconsistent.
Explain why switchMap is suitable for search but can be dangerous for operations that must complete.
Did you know it?
24 How do switchMap, mergeMap, concatMap, and exhaustMap differ when handling user-triggered HTTP operations? hard
rxjshigher-order-mappingconcurrency
Reference answer
switchMap switches to the latest operation, while mergeMap allows multiple inner operations to run concurrently.
concatMap queues operations sequentially, preserving their execution order.
exhaustMap ignores new source emissions while the current inner operation is active, making it useful for preventing overlapping submissions.
Did you know it?
25 A checkout button can be clicked repeatedly while payment processing is in progress. Which RxJS strategy would you use? medium
exhaustmappayment-flowrxjs
Reference answer
exhaustMap can ignore additional click events while an active payment request is running.
Disable the button during processing and use backend idempotency keys to prevent duplicate charges.
Client-side stream control improves UX but cannot replace server-side transaction safety.
Did you know it?
26 Why can shareReplay(1) cause unexpected memory retention or stale API responses? hard
sharereplayrxjs-cachingmemory-management
Reference answer
shareReplay caches emissions and may retain its source subscription depending on configuration.
A long-lived shared Observable can therefore preserve old data or keep resources active unexpectedly.
Choose appropriate refCount behavior, cache lifetime, and invalidation rules based on whether the source completes or remains active.
Did you know it?
27 How would you prevent memory leaks from Observable subscriptions in a component without manually maintaining a Subscription array? medium
take-until-destroyedrxjsmemory-leaks
Reference answer
Use takeUntilDestroyed() from Angular's RxJS interoperability utilities to bind subscription lifetime to the component's DestroyRef.
For template consumption, prefer the async pipe when practical.
Long-lived services require their own lifecycle strategy because a root service may exist for the application's entire lifetime.
Did you know it?
28 Why does placing catchError outside switchMap produce different behavior from placing it inside switchMap? hard
catcherrorswitchmaperror-handling
Reference answer
An inner catchError can recover from an individual HTTP failure while allowing the outer event stream to continue receiving new events.
An outer catchError handles an error after it reaches the outer chain and may terminate or replace that stream.
For repeated search interactions, handle request-specific failures inside the mapping operation.
Did you know it?
29 An Observable created with combineLatest does not emit even though one source has produced values. Why? medium
combinelatestrxjsstream-composition
Reference answer
combineLatest waits until every source Observable has emitted at least one value before producing its first combined result.
A source that has not emitted prevents the combined stream from emitting.
Use startWith() for suitable initial values or choose another combination operator when different synchronization semantics are required.
Did you know it?
30 When would forkJoin be a better choice than combineLatest for loading a dashboard? medium
forkjoincombinelatestdashboard
Reference answer
forkJoin is appropriate when several finite Observables must complete before a combined result is needed.
It emits the latest value from each source once all sources complete.
combineLatest is better for ongoing reactive sources whose combined values should update whenever a source emits.
Did you know it?
31 An OnPush child component does not update when its parent changes a property inside an input object. Why? medium
onpushimmutabilityinput-binding
Reference answer
Mutating an existing object preserves its reference, so Angular may not detect a new input value for the OnPush child.
Create a new object reference when updating immutable input data.
Alternatively, use appropriately managed Signals or explicit change detection notifications when the architecture requires them.
Did you know it?
32 How does reading a Signal in an OnPush component template affect change detection? medium
signalsonpushchange-detection
Reference answer
Angular tracks Signals read by the template and associates those dependencies with the component.
When a tracked Signal changes, Angular marks the component for a future check.
This enables fine-grained reactive updates without requiring manual ChangeDetectorRef calls for ordinary Signal state changes.
Did you know it?
33 What is the difference between markForCheck() and detectChanges()? medium
changedetectorrefmarkforcheckdetectchanges
Reference answer
markForCheck() marks a view as needing checking during an upcoming change detection pass.
detectChanges() synchronously checks the current view and its descendants.
Use explicit change detection sparingly, since reactive state and Angular-managed events usually provide the required notifications.
Did you know it?
34 What causes ExpressionChangedAfterItHasBeenCheckedError, and how should it be addressed? hard
expression-changed-errorlifecyclechange-detection
Reference answer
The error occurs in development checks when a bound expression changes after Angular has already checked it during the same verification cycle.
It often indicates state mutation during an unsuitable lifecycle phase or a problematic parent-child update.
Move the update to the correct state transition or lifecycle mechanism rather than hiding the problem with arbitrary timers.
Did you know it?
35 How does zoneless change detection change the way Angular applications schedule updates? hard
zonelesschange-detectionsignals
Reference answer
Zoneless change detection does not rely on Zone.js to observe arbitrary asynchronous activity.
Angular schedules updates through explicit notifications such as Signal changes, template listeners, and change detection APIs.
Applications must ensure state changes made through external callbacks produce an appropriate Angular notification.
Did you know it?
36 A component calls an expensive calculation directly from its template. Why might performance degrade? medium
template-performancecomputed-signalsmemoization
Reference answer
Template expressions can be evaluated repeatedly during change detection, causing the calculation to execute more often than expected.
Move expensive derived calculations into computed Signals or other appropriately memoized state.
Use pure pipes when transformation semantics and input stability make them suitable.
Did you know it?
37 How would you optimize rendering a table containing 50,000 rows in Angular? hard
virtual-scrollinglarge-listsperformance
Reference answer
Avoid rendering every row simultaneously; use virtual scrolling or server-side pagination.
Track rows by stable identifiers and minimize expensive template expressions.
Use OnPush, efficient state updates, and appropriately sized data requests to reduce DOM and change detection overhead.
Did you know it?
38 How does @defer improve performance, and what happens to content inside a deferred block? medium
deferlazy-loadingperformance
Reference answer
@defer allows Angular to delay loading dependencies and rendering content until a configured trigger occurs.
Triggers can include viewport visibility, interaction, idle time, or explicit conditions.
Placeholder, loading, and error blocks can provide appropriate UI states while deferred content becomes available.
Did you know it?
39 How would you structure lazy-loaded routes in a large standalone Angular application? medium
lazy-routesstandalonecode-splitting
Reference answer
Organize routes around feature boundaries and use loadComponent or loadChildren for lazy loading.
Register feature-specific providers at route boundaries when separate dependency scopes are required.
Avoid importing large feature dependencies into eagerly loaded components, which can undermine code splitting.
Did you know it?
40 Why should route guards not be treated as the primary security mechanism for protecting backend APIs? medium
route-guardsauthorizationfrontend-security
Reference answer
Angular route guards execute in the browser, where application code and navigation behavior are controlled by the client.
They improve navigation flow but cannot enforce trusted authorization.
Backend APIs must independently authenticate requests and verify permissions for every protected operation.
Did you know it?
41 How would you attach access tokens to HTTP requests without duplicating authentication logic across Angular services? medium
http-interceptorsjwtauthentication
Reference answer
Create a functional HTTP interceptor and register it through provideHttpClient with withInterceptors.
The interceptor can clone eligible requests and attach an Authorization header using the current access token.
Exclude endpoints that do not require credentials and avoid leaking tokens to untrusted origins.
Did you know it?
42 Multiple HTTP requests receive 401 responses simultaneously. How would you prevent every request from triggering a separate token refresh? hard
token-refreshhttp-interceptorsrxjs
Reference answer
Coordinate refresh operations through a shared in-flight Observable or another single-flight mechanism.
Requests encountering an expired token can wait for the same refresh result before retrying once.
Handle refresh failure by clearing authentication state and avoid interceptor loops on the refresh endpoint.
Did you know it?
43 What security risks should be considered when rendering HTML received from an API? medium
xssdom-sanitizationangular-security
Reference answer
Untrusted HTML can contain malicious markup or URLs that lead to cross-site scripting vulnerabilities.
Angular sanitizes values in supported security contexts, but bypassing sanitization can reintroduce risk.
Avoid trusting arbitrary API content and use bypassSecurityTrustHtml only for content that has been independently verified as safe.
Did you know it?
44 How would you implement a reusable custom form control that works with Angular Reactive Forms? hard
control-value-accessorreactive-formscustom-controls
Reference answer
Implement ControlValueAccessor to connect the custom component with Angular's forms API.
Provide methods for writing values, registering change and touched callbacks, and handling disabled state.
This allows the control to participate in FormControl and FormGroup operations like a built-in form element.
Did you know it?
45 A reactive form contains two password fields that must match. Where should the validation logic be placed? medium
reactive-formscross-field-validationformgroup
Reference answer
Use a FormGroup-level validator because the rule depends on values from multiple controls.
The validator compares the fields and returns a validation error when they differ.
Display the group-level error appropriately while preserving individual control validation and touched states.
Did you know it?
46 How would you prevent outdated asynchronous validation responses from incorrectly marking a form field valid? hard
async-validatorreactive-formsrace-conditions
Reference answer
Use Angular's async validator mechanism with an Observable or Promise that completes for each validation run.
Angular can unsubscribe from a previous Observable-based validation when a newer value requires validation.
Debounce expensive requests where appropriate and ensure validation results correspond to the current input value.
Did you know it?
47 What causes hydration mismatches in Angular server-side rendered applications? hard
ssrhydrationdom-mismatch
Reference answer
Hydration mismatches occur when the client expects a DOM structure that differs from the server-rendered HTML.
Common causes include direct DOM manipulation, invalid HTML nesting, and different server/client rendering conditions.
Keep initial rendering deterministic and use Angular-supported browser-only rendering mechanisms when necessary.
Did you know it?
48 How would you prevent duplicate API requests when an Angular page is rendered on the server and then hydrated in the browser? hard
ssrtransfer-cachehydration
Reference answer
Use Angular's HTTP transfer cache or TransferState to reuse suitable server-fetched data during hydration.
Ensure requests are eligible for transfer caching and configure exclusions for sensitive or user-specific responses when required.
This reduces redundant network calls and improves initial rendering performance.
Did you know it?
49 How would you test a standalone Angular component that depends on a Signal-based service and an HTTP API? medium
angular-testingsignalshttp-testing
Reference answer
Configure TestBed with the standalone component in imports and provide mocked services or HTTP testing providers.
Control the service's Signal values to verify reactive template updates.
Use HttpTestingController to inspect requests, supply test responses, and verify that no unexpected requests remain.
Did you know it?
50 You are designing a large Angular dashboard with live notifications, searchable tables, lazy-loaded features, and shared user preferences. How would you structure its reactive architecture? hard
signalsrxjsangular-architecture
Reference answer
Use standalone feature components with route-level lazy loading and carefully scoped dependency injection.
Manage synchronous UI state and derived values with Signals, while RxJS handles HTTP requests, live event streams, cancellation, and retries.
Apply OnPush, stable list tracking, virtual scrolling, and deferred rendering, with backend authorization and comprehensive performance monitoring.
Explain the boundaries between Signals and Observables, service ownership, change detection, and performance optimization.
Did you know it?
0 / 0 answered