Complete Angular interview preparation guide for candidates and interviewers.
Complete Angular interview preparation guide for candidates and interviewers.
Angular is a TypeScript-based frontend framework developed by Google for building Single Page Applications (SPA).
Applications like Admin Dashboards, CRM Systems, ERP Applications, Banking Portals and Enterprise Platforms are commonly built using Angular.
Interviewer Note: 💡 Strong candidates explain Angular using real projects.
Components are the fundamental building blocks of Angular applications. Each component controls a part of the UI.
@Component({
selector: 'app-user',
templateUrl: 'user.html'
})
export class UserComponent {
}
Data Binding is the mechanism used to synchronize data between the component and the view.
{{ name }}
[disabled]="isLoading"
(click)="save()"
[(ngModel)]
Interviewer Note: 💡 Candidate should explain when each binding type is used.
Services are used to share business logic and data between components.
@Injectable({
providedIn: 'root'
})
export class UserService {
}
Change Detection is Angular's mechanism for synchronizing application state with the DOM.
Whenever data changes, Angular checks components and updates the UI accordingly.
Large dashboards containing hundreds of components often use OnPush to improve rendering performance.
Interviewer Note: 💡 Strong candidates explain why OnPush improves performance.
Observables represent asynchronous streams of data that can emit multiple values over time.
this.userService.getUsers()
.subscribe((users) => {
this.users = users;
});
Cancels previous requests.
Best for SearchRuns requests in parallel.
Best for Bulk OperationsExecutes requests sequentially.
Best for Ordered OperationsInterviewer Note: 💡 🚨 This question quickly identifies candidates with real RxJS experience.
Memory leaks commonly occur when subscriptions remain active after components are destroyed.
Lazy Loading loads modules only when required, reducing initial bundle size.
Admin module should not load until a user navigates to administrative pages.
Server-Side Rendering renders HTML on the server before sending it to the browser.
Public-facing websites like DevStacker, eCommerce stores, blogs and news portals benefit significantly from SSR.
Hydration attaches Angular functionality to HTML already rendered by the server, avoiding complete re-rendering.
Interviewer Note: 💡 Strong candidates understand SSR and Hydration together.
Candidate should explain when to use Signals, when to use RxJS and when to combine both.
Users report that the dashboard becomes unusable after remaining open for 30 minutes.
Interviewer Note: 💡 🚨 Candidates who jump directly to code changes without investigation often lack debugging experience.
Your organization has 15 frontend teams working on a large CRM platform. Would you choose a monolithic Angular application or Micro Frontends?
Interviewer Note: 💡 Strong architects discuss trade-offs instead of claiming one approach is always superior.
Multiple teams want custom components that violate standards. How do you maintain consistency while allowing flexibility?
One engineer wants NgRx. Another wants Signals-based state management.
Interviewer Note: 💡 Look for clean code rather than perfect UI.
Dashboard contains 100 widgets and becomes slow after loading.
Evaluate architecture thinking, maintainability and code quality.
Production users report occasional browser freezes.
Angular detected that a value changed after change detection completed.
Updating component state inside ngAfterViewInit().
"Just use setTimeout()".
Explain the root cause, lifecycle timing, and when ChangeDetectorRef should be used.
Interviewer Note: 💡 Many developers incorrectly believe OnPush completely disables change detection.
Difference between static:true and static:false.
Async Pipe automatically subscribes and unsubscribes when the component is destroyed.
Interviewer Note: 💡 🚨 Strong candidates also explain situations where async pipe is not sufficient.
Candidate understands that Signals and RxJS complement each other.
user.name = 'John';
Object reference didn't change. Only a property changed.
Users report that the application becomes slower after keeping it open for several hours.
Users report application startup has become extremely slow.
Interviewer Note: 💡 Strong candidates investigate before optimizing.
A dashboard receives thousands of real-time updates per minute.
Standalone Components are self-contained components that do not require declaration in an @NgModule.
Instead, they specify their dependencies directly using the imports array in their decorator.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-standalone-card',
standalone: true,
imports: [CommonModule, RouterModule],
template: `
<div class="card">
<h3>Standalone Card</h3>
<a routerLink="/details">View Details</a>
</div>
`
})
export class StandaloneCardComponent {}
bootstrapApplication() instead of platformBrowserDynamic().bootstrapModule().Interviewer Note: 💡 Look for candidate's understanding of why Standalone components simplify the component tree and improve bundle sizes.
A @Component is actually a specialized type of @Directive that has a template (HTML) and styles (CSS).
A @Directive is used to add behavior to existing HTML elements or components without rendering a separate template.
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]',
standalone: true
})
export class HighlightDirective {
@Input() color = 'yellow';
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.el.nativeElement.style.backgroundColor = this.color;
}
@HostListener('mouseleave') onMouseLeave() {
this.el.nativeElement.style.backgroundColor = null;
}
}
*ngIf) to add or remove DOM elements dynamically.Interviewer Note: 💡 Strong candidates explain directives using examples of code reuse across different UI components.
Dependency Injection is a design pattern where a class requests dependencies from external sources rather than creating them itself. Angular has a hierarchical DI framework.
// Singleton Service
@Injectable({
providedIn: 'root'
})
export class GlobalConfigService {
config = { api: '/api' };
}
// Component-scoped Service
@Component({
selector: 'app-scoped-widget',
standalone: true,
providers: [LocalWidgetService],
template: `<p>Widget Active</p>`
})
export class ScopedWidgetComponent {
constructor(private widgetService: LocalWidgetService) {}
}
Interviewer Note: 💡 Candidates should know that providedIn: 'root' is preferred for global services due to bundle optimization advantages.
Pipes are template modifiers used to format or transform values directly in HTML interpolation.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'truncate',
pure: true,
standalone: true
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
if (!value) return '';
return value.length > limit ? value.substring(0, limit) + '...' : value;
}
}
Do not create impure pipes that perform array filtering or sorting inside templates, as they execute hundreds of times per second and will lag the user interface. Use computed signals instead.
Interviewer Note: 💡 Check if the candidate knows when to avoid pipes (e.g. heavy calculations, network requests) and uses them only for lightweight formatting.
Angular supports two forms architectures:
ngModel) to build the data model. They are asynchronous, simple, and ideal for basic login forms or filters.
// Reactive Form Example
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-login-form',
standalone: true,
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<input formControlName="email" type="email" />
<button type="submit" [disabled]="loginForm.invalid">Submit</button>
</form>
`
})
export class LoginFormComponent {
loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email])
});
onSubmit() {
console.log(this.loginForm.value);
}
}
Interviewer Note: 💡 Modern enterprise applications almost exclusively use Reactive Forms because of their robustness and testability.
Lifecycle Hooks allow components and directives to execute logic at key stages of their existence (initialization, data binding updates, DOM checks, and destruction).
ngOnInit and whenever input properties (@Input) change. Receives a SimpleChanges object containing old and new values.ngOnInit.ngOnDestroy.DestroyRef or takeUntilDestroyed() instead of implementing ngOnDestroy manually.Interviewer Note: 💡 Ask the candidate: 'Does ngOnInit run when component properties change later?' (Answer: No, only once).
Both decorators query references to child elements or directives from the DOM, but they look in different parts of the component hierarchy:
<ng-content> tags).
@Component({
selector: 'app-parent',
standalone: true,
template: `
<!-- ViewChild target -->
<input #myInput type="text" />
<!-- ContentChild target projected -->
<app-custom-card>
<h2 #cardTitle>Projected Title</h2>
</app-custom-card>
`
})
export class ParentComponent {
@ViewChild('myInput') inputEl!: ElementRef;
}
@Component({
selector: 'app-custom-card',
standalone: true,
template: `
<div class="card">
<ng-content></ng-content>
</div>
`
})
export class CustomCardComponent {
@ContentChild('cardTitle') titleEl!: ElementRef;
}
Interviewer Note: 💡 ViewChild references are usually resolved in ngAfterViewInit, whereas ContentChild references are resolved in ngAfterContentInit.
Angular treats all template values as untrusted by default. When values are dynamically bound to properties (e.g. [innerHTML], [src]), Angular automatically sanitizes them to strip malicious script injections.
<script>, JavaScript links) before rendering.bypassSecurityTrustHtml() or bypassSecurityTrustUrl().
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-secure-render',
standalone: true,
template: `<div [innerHTML]="trustedHtml"></div>`
})
export class SecureRenderComponent {
trustedHtml: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
const rawHtml = '<b>Formatted</b> <script>alert("xss")</script>';
// Sanitizer bypass allows raw html but requires developer responsibility!
this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
}
}
Interviewer Note: 💡 Candidates should demonstrate strict caution when using DomSanitizer, confirming they validate user inputs beforehand.
Content Projection is a pattern that lets you insert dynamic HTML content from a parent component into a child component's template.
This is accomplished using the <ng-content> tag, which acts as a placeholder.
<ng-content> placeholder.select attribute (e.g. select="[header]", select=".footer").
@Component({
selector: 'app-panel',
standalone: true,
template: `
<div class="panel-container">
<div class="panel-header">
<ng-content select="[header]"></ng-content>
</div>
<div class="panel-body">
<ng-content></ng-content> <!-- Default Slot -->
</div>
</div>
`
})
export class PanelComponent {}
Interviewer Note: 💡 A junior candidate should understand why content projection is essential for creating reusable wrapper components like cards, modals, or accordions.
Angular's HttpClient returns RxJS Observables. To handle errors, you pipe the request through the catchError operator, which intercept failures (e.g. 404, 500, network loss) and allows you to return a fallback value or throw a refined error message using throwError.
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { catchError, throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private http = inject(HttpClient);
fetchData() {
return this.http.get('/api/resource').pipe(
catchError((error: HttpErrorResponse) => {
console.error('API Error occurred:', error.message);
return throwError(() => new Error('Something went wrong. Please try again.'));
})
);
}
}
Interviewer Note: 💡 Candidates should mention HttpErrorResponse and distinguish between client-side network errors and server-side HTTP status errors.
Signals are a reactive system introduced to track state changes and trigger updates efficiently. A signal is a wrapper around a value that notifies interested consumers when that value changes.
set(), update(), or mutating arrays.computed(). They track other signal dependencies and automatically re-calculate. They are read-only and lazy-evaluated (cached).effect() that run side-effects (e.g., logging, saving to localstorage) whenever their dependent signals change.
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-counter',
standalone: true,
template: `
<button (click)="increment()">Clicks: {{ count() }}</button>
<p>Double count: {{ doubleCount() }}</p>
`
})
export class CounterComponent {
count = signal(0);
doubleCount = computed(() => this.count() * 2);
constructor() {
effect(() => {
console.log('Current count value:', this.count());
});
}
increment() {
this.count.update(c => c + 1);
}
}
Interviewer Note: 💡 Check if the candidate knows computed signals are read-only and that you shouldn't modify other signal states inside an effect.
In RxJS, these primitives handle data flow differently:
import { Subject, BehaviorSubject } from 'rxjs';
// Subject (no initial value, does not cache)
const searchSubject = new Subject<string>();
searchSubject.next('no one hears this');
// BehaviorSubject (caches state)
const userSubject = new BehaviorSubject<string>('Guest');
userSubject.subscribe(user => console.log(user)); // logs 'Guest' immediately
userSubject.next('Admin'); // logs 'Admin'
Interviewer Note: 💡 Strong candidates explain why BehaviorSubjects are perfect for holding application state like user profile data or cart contents.
Route Guards are functional boundaries used to grant or deny access to specific application routes based on condition checks (like login state or role clearances).
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';
export const authGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isAuthenticated()) {
return true;
}
return router.createUrlTree(['/login']);
};
Interviewer Note: 💡 Highlight the difference between canActivate and canMatch (canMatch prevents downloading code files entirely, whereas canActivate executes after bundle download).
A custom validator is a factory function that returns a validation function of type ValidatorFn.
The validator function accepts an AbstractControl and returns validation errors (ValidationErrors) if validation fails, or null if it passes.
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
// Factory function allowing parameter input
export function blockDomainsValidator(blockedDomains: string[]): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
if (!control.value) return null;
const email = control.value as string;
const domain = email.substring(email.lastIndexOf('@') + 1);
if (blockedDomains.includes(domain)) {
return { blockedDomain: { domain } };
}
return null;
};
}
Interviewer Note: 💡 Candidates should show how custom validators are added to FormControl configurations and how to access validation errors in the HTML.
HTTP Interceptors act as middlewares that intercept, modify, or log outgoing HTTP requests and incoming responses globally.
Because HttpRequest objects are immutable, interceptors clone the request and update headers (like adding authorization Bearer tokens) before passing the execution flow to the next handler.
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const authService = inject(AuthService);
const token = authService.getToken();
if (token) {
const cloned = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next(cloned);
}
return next(req);
};
Interviewer Note: 💡 Functional interceptors are preferred in modern Angular 15+ setups. Make sure they mention registering it in provideHttpClient(withInterceptors([authInterceptor])).
Dynamic Component Loading is rendering components on the fly rather than writing their selectors directly in HTML templates.
This is accomplished by injecting ViewContainerRef, which acts as a container, and calling its createComponent() method, passing the target component class.
import { Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
import { DynamicWidgetComponent } from './dynamic-widget.component';
@Component({
selector: 'app-dashboard',
standalone: true,
template: `
<button (click)="loadWidget()">Load Widget</button>
<div #widgetContainer></div>
`
})
export class DashboardComponent {
@ViewChild('widgetContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
loadWidget() {
this.container.clear();
const componentRef = this.container.createComponent(DynamicWidgetComponent);
// You can set input properties directly on the instance
componentRef.instance.widgetId = 'W101';
}
}
Interviewer Note: 💡 A good candidate discusses cleaning up the container using container.clear() to prevent memory accumulation.
These combination operators handle multiple asynchronous streams differently:
Promise.all. It waits for all source observables to complete, then emits a single array of their final emitted values. If any source stream fails, the entire forkJoin fails.Interviewer Note: 💡 Ensure the candidate notes that forkJoin requires all source streams to complete to emit, whereas combineLatest does not.
Route Resolvers pre-fetch data from APIs before a route transition completes. If the resolver fails or takes too long, the navigation is held back. This avoids flickering rendering where components render with empty states while waiting for HTTP responses.
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { ProductService } from './product.service';
export const productResolver: ResolveFn<any> = (route, state) => {
const productService = inject(ProductService);
const productId = route.paramMap.get('id')!;
return productService.getProduct(productId);
};
// Accessing in Component:
// route.data.subscribe(data => this.product = data.product);
Interviewer Note: 💡 While resolvers improve aesthetic transition states, candidates should know they can block UI updates, causing page load delays. Skeletal loading states are often preferred instead.
The @defer block allows deferred (lazy) loading of components, directives, and pipes.
It splits assets into separate JavaScript bundles loaded only when specified conditions are met.
@defer (on viewport; prefetch on idle) {
<app-heavy-chart [data]="stats"></app-heavy-chart>
} @placeholder {
<div class="chart-skeleton">Loading graph...</div>
} @loading {
<app-spinner></app-spinner>
} @error {
<p>Failed to load chart asset.</p>
}
Interviewer Note: 💡 Check if the candidate knows that only components referenced inside @defer that are standalone can be lazy-loaded.
Both operators manage subscription lifecycles to prevent memory leaks, but differ in syntax complexity:
destroy$), piping it to all observables, and triggering destroy$.next() inside the ngOnDestroy() lifecycle method.DestroyRef instance, removing boilerplate.
import { Component, OnInit, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'app-stats',
standalone: true,
template: `<p>Stats Active</p>`
})
export class StatsComponent implements OnInit {
private http = inject(HttpClient);
constructor() {
// If used in constructor, it automatically infers active Injection Context
this.http.get('/api/live').pipe(
takeUntilDestroyed()
).subscribe(data => console.log(data));
}
ngOnInit() {
// If used outside constructor, you must pass active DestroyRef explicitly!
}
}
Interviewer Note: 💡 Critical check: The candidate must mention that if takeUntilDestroyed() is called outside the constructor (injection context), you must pass DestroyRef explicitly.
Angular Router provides three primary methods for data sharing:
/users/:id. Best for accessing primary entity identifiers./search?term=angular&page=2. Shared across multiple views.data: { title: 'Admin panel' }.
Modern Binding: Using withComponentInputBinding(), Angular binds parameters directly to component inputs.
// Route config
export const routes = [
{
path: 'details/:id',
component: DetailsComponent,
data: { role: 'moderator' }
}
];
// Component matching config
@Component({
selector: 'app-details',
standalone: true,
template: `<p>Id: {{ id }}, Role: {{ role }}</p>`
})
export class DetailsComponent {
@Input() id!: string; // Route Parameter
@Input() role!: string; // Route Data
@Input() page?: string; // Query Parameter
}
Interviewer Note: 💡 Look for candidate's usage of modern component input bindings for routing parameter consumption, introduced in Angular 16.
View Encapsulation scopes component CSS styles to protect them from bleeding out and affecting global layouts.
_ngcontent-c12) to target selectors. This emulates Shadow DOM scoping across all browsers.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-custom-btn',
standalone: true,
encapsulation: ViewEncapsulation.ShadowDom,
styles: [`
button { background: red; }
`],
template: `<button>Scoped Button</button>`
})
export class CustomBtnComponent {}
Interviewer Note: 💡 Check if the candidate knows when to use None (e.g. wrapper themes targeting dynamic child overlays) and its associated risks.
Traditionally, Angular relies on Zone.js to intercept all asynchronous events (clicks, timers, HTTP calls) and trigger a top-down dirty check of the component tree. Zoneless Angular eliminates Zone.js, removing startup overhead and browser monkey-patch dependency.
provideExperimentalZonelessChangeDetection() in modern bootstrap files.ChangeDetectorRef calls) to know when and where updates are needed.
// app.config.ts
import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection()
]
};
Interviewer Note: 💡 This is a crucial concept for Angular 18/19. Strong candidates explain how change detection shifts from top-down polling to reactive target re-rendering.
@ngrx/signals is a lightweight, functional state management library based on Angular Signals.
It defines state as slices of signals, using a modular design that lets you attach state, selectors, and methods cleanly.
signalStore(). It encapsulates slices, provides auto-computed selectors, and leverages custom functional extensions (e.g. withEntities()) for entity manipulation.
import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CounterStore = signalStore(
{ providedIn: 'root' },
withState({ count: 0 }),
withComputed(({ count }) => ({
doubleCount: computed(() => count() * 2)
})),
withMethods((store) => ({
increment() {
// Safe state updates
patchState(store, { count: store.count() + 1 });
}
}))
);
Interviewer Note: 💡 Look for comments on local vs global scope. NgRx Signal Store can be declared locally inside component providers to align with component lifecycles.
Optimizing bundles guarantees fast Page Load and First Contentful Paint. Key strategies include:
loadComponent).@defer control flow syntax to lazy-load elements (such as heavy charts, models) on triggers.angular.json configurations, throwing warnings or errors if code sizes grow.source-map-explorer to analyze production bundle sizes.Interviewer Note: 💡 Strong candidates explain how ESBuild builders handle css/js pre-bundling more efficiently than Webpack.
Content Security Policy (CSP) is an HTTP header protocol that restricts external domains from injecting inline scripts or malicious styles. In SSR contexts, inline style blocks and hydration bootstrap tags generated dynamically by the server fail CSP checks unless they are signed.
// server.ts (Express configuration)
// app.get('*', (req, res) => {
// const nonce = generateSecureNonce();
// res.setHeader('Content-Security-Policy', `default-src 'self'; script-src 'self' 'nonce-${nonce}';`);
//
// res.render('index', {
// req,
// providers: [{ provide: CSP_NONCE, useValue: nonce }]
// });
// });
Interviewer Note: 💡 This is an advanced security scenario. Check if they know CSP_NONCE from @angular/core is used to sync tokens.
Testing signals is straightforward since they are accessed via simple function calls. In tests:
component.mySignal() and match expectations.fixture.componentRef.setInput('inputName', value).fixture.detectChanges() or inject TestBed.flushEffects() to trigger effect updates.
// fixture.componentRef.setInput('username', 'Alice');
// fixture.detectChanges();
// expect(component.welcomeMessage()).toBe('Welcome, Alice!');
Interviewer Note: 💡 Check if the candidate knows how to mock signals and use setInput (since inputs are read-only and cannot be mutated directly).
The Angular Component Dev Kit (CDK) is a library containing behavior primitives and structural utilities without layout styles. It solves complex UI interactions (accessibility, rendering performance, layout behaviors) while giving developers complete freedom over styling.
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { Injectable, inject } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ModalService {
private overlay = inject(Overlay);
open(component: any): OverlayRef {
const overlayRef = this.overlay.create({
hasBackdrop: true,
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
});
overlayRef.attach(new ComponentPortal(component));
return overlayRef;
}
}
Interviewer Note: 💡 Candidates should talk about separation of concerns: Angular CDK handles the logic and compliance, while custom CSS handles presentation.
In Angular 17, the legacy Angular Universal compiler was integrated into the core Angular framework under @angular/ssr.
provideServerRendering().Interviewer Note: 💡 Ensure the candidate can outline the differences between static prerendering and dynamic server rendering.
Dynamic Forms generate controls dynamically from a config object (e.g. JSON schema) rather than hardcoding fields. Iterate through the schema definition, instantiate FormControls, add validation objects based on schema configurations, and register them into a root FormGroup.
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
interface FormFieldConfig {
name: string;
type: string;
required: boolean;
}
@Component({
selector: 'app-schema-form',
standalone: true,
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="dynamicForm">
@for (field of schema; track field.name) {
<div>
<label>{{ field.name }}</label>
<input [type]="field.type" [formControlName]="field.name" />
</div>
}
</form>
`
})
export class SchemaFormComponent implements OnInit {
schema: FormFieldConfig[] = [
{ name: 'username', type: 'text', required: true },
{ name: 'age', type: 'number', required: false }
];
dynamicForm = new FormGroup({});
ngOnInit() {
this.schema.forEach(field => {
const rules = field.required ? [Validators.required] : [];
this.dynamicForm.addControl(field.name, new FormControl('', rules));
});
}
}
Interviewer Note: 💡 Check if the candidate knows how dynamic configurations affect component re-rendering and the benefits of addControl / removeControl.
Signal inputs and outputs modernize parent-child communication:
ngOnChanges to trace changes, you can declare computed() signals or trigger effects directly when values change.@Output() and EventEmitter. Fully type-safe and does not use RxJS EventEmitters under the hood, simplifying the rendering cycle.
import { Component, input, output, computed } from '@angular/core';
@Component({
selector: 'app-signal-child',
standalone: true,
template: `<button (click)="emit()">Click {{ formattedVal() }}</button>`
})
export class SignalChildComponent {
// Signal Input
value = input.required();
// Computed derived from Input
formattedVal = computed(() => `Value: ${this.value() * 10}`);
// Signal Output
action = output();
emit() {
this.action.emit('clicked');
}
}
Interviewer Note: 💡 Signal inputs are read-only (you cannot assign value = 5 directly). Ask candidates how to handle fallback values.
Complex async flows require piping operators to ensure reliability and clean error flows:
switchMap for cancellations, concatMap for strict sequencing).retry({ count: 3, delay: 1000 }) to recover from transient failures.shareReplay(1) to cache HTTP responses and avoid redundant calls to the backend.catchError blocks to prevent global streams from closing.
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { switchMap, shareReplay, retry, catchError } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class OrchestrationService {
private http = inject(HttpClient);
getUserProfileAndOrders(userId: string) {
return this.http.get(`/api/users/${userId}`).pipe(
retry(2),
switchMap(profile =>
this.http.get(`/api/orders/${userId}`).pipe(
catchError(err => {
console.error('Failed to load orders', err);
throw err;
})
)
),
shareReplay(1)
);
}
}
Interviewer Note: 💡 Look for the candidate's understanding of catchError placement. Placing catchError on the inner stream preserves the outer stream.
Module Federation allows compiling distinct Angular applications independently and loading them dynamically at runtime.
@angular/core, @angular/common, and rxjs as singletons, ensuring the browser only downloads a single copy.
// router config in Host Shell Application
// loadChildren: () => loadRemoteModule({ type: 'module', remoteEntry: '...', exposedModule: './Module' }).then(m => m.Module)
Interviewer Note: 💡 Make sure they discuss version compatibility challenges (ensuring all micro-frontends use matching core Angular versions).
Build-time variables require rebuilding the application for every environment (Dev, QA, Prod). To achieve dynamic runtime configuration:
assets/config.json).HttpClient during application initialization, blocking execution until the request resolves.config.json file at runtime on the server (e.g., using Kubernetes ConfigMaps).
// APP_INITIALIZER provider mapping config:
// { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [HttpClient], multi: true }
Interviewer Note: 💡 Ask the candidate how this strategy affects SSR. (Answer: The server fetch endpoint must also resolve local configurations correctly).
A multi-tenant corporate banking portal requires clean state boundaries, strict security isolations, and fast performance.
// Multi-level Signal state model representation
// export const AuthStore = signalStore({ providedIn: 'root' }, ...)
Interviewer Note: 💡 Look for discussion on security: ensuring client memory cleanup during logout/tenant switches to protect user banking data.
Clean Architecture separates business rules from frameworks and interfaces, ensuring modularity and testability.
Interviewer Note: 💡 Look for the candidate's use of clean architecture layers in file structures (e.g. core vs shared vs features).
An Nx Monorepo helps coordinate multiple applications and shared libraries under a single repository, enforcing coding standards across teams.
ui library from importing a feature library, and enforce domain isolation (e.g. domain:finance cannot import domain:hr).
// eslint rules configuration representation:
// "@nx/enforce-module-boundaries": [ "error", { "depConstraints": [...] } ]
Interviewer Note: 💡 Strong candidates highlight dependency control: preventing dependency cycles and domain pollution across monorepo boundaries.
Zero-downtime internationalization demands low build times, fast CDN load speeds, and dynamic language switching.
domain.com/es/, domain.com/en/). Combine this with client-side routing redirects to serve localized pages instantly based on request headers.Interviewer Note: 💡 Ensure they cover SEO considerations: localized bundles are indexed correctly by search engine crawlers.
Collaborative systems require low-latency synchronization and highly optimized rendering to prevent typing lag.
Yjs or Automerge to resolve editing conflicts.Interviewer Note: 💡 Strong candidates explain why Zone.js must be bypassed during rapid local typing updates to maintain UI responsiveness.
Enterprise monitoring requires capturing client-side errors and performance metrics without degrading application performance.
ErrorHandler provider to intercept all uncaught browser exceptions globally.
import { ErrorHandler, Injectable, Injector } from '@angular/core';
@Injectable()
export class GlobalLoggingHandler implements ErrorHandler {
constructor(private injector: Injector) {}
handleError(error: any): void {
console.error('Logged Error:', error.message || error.toString());
}
}
Interviewer Note: 💡 Ask the candidate: 'Why do we inject Injector instead of services directly?' (Answer: To prevent circular dependencies, since logging handler is created at application startup).
Select the best rendering strategy based on SEO needs and data dynamic nature:
Interviewer Note: 💡 Look for candidate's understanding of hybrid approaches, compiling public paths to static pages while routing dashboard pages to client-side rendering.
ng update to avoid breaking changes.ng generate @angular/core:standalone to convert components and remove NgModules.zone.js from polyfills. Add provideExperimentalZonelessChangeDetection() in config files, then test for change detection errors.Interviewer Note: 💡 Check if the candidate recommends incremental migration (feature-by-feature) rather than a complete rewrite.
Effects automatically manage their life cycle based on the context they are declared in:
effect() links to their active injection context. When that component is destroyed, the effect is destroyed automatically.onCleanup registration method, allowing you to clean up external assets (e.g. timeout triggers, canvas frames) before the next run.
effect((onCleanup) => {
const token = setTimeout(() => console.log('Ping'), 1000);
onCleanup(() => clearTimeout(token));
});
Interviewer Note: 💡 Explain that effects shouldn't write to signals by default to avoid cascading change detection loops (throws errors unless `allowSignalWrites: true` is set).
The inject() function relies on a global, active injector context that is set during class creation (e.g. constructor execution or field initialization).
If you call inject() inside an asynchronous callback (like a setTimeout or click event handler), that initialization context is lost, throwing an error.
Solution: Store a reference to the active Injector during constructor initialization, then wrap the async logic with runInInjectionContext().
import { Component, Injector, runInInjectionContext, inject } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-async-inject',
standalone: true,
template: `<button (click)="onClick()">Load Async</button>`
})
export class AsyncInjectComponent {
private injector = inject(Injector);
onClick() {
setTimeout(() => {
runInInjectionContext(this.injector, () => {
const service = inject(DataService);
});
}, 500);
}
}
Interviewer Note: 💡 Check if the candidate knows how to leverage runInInjectionContext to dynamically load libraries or services at runtime.
When a child FormControl is disabled, it is excluded from the group validation list and its value is removed from FormGroup.value.
If all children controls inside a Form Group are disabled, the containing Form Group transitions to the DISABLED state automatically, bypassing all group-level validators. They will not execute, even if validations failed beforehand.
Workaround: Read values using formGroup.getRawValue() instead, and run validations manually, or keep controls enabled but set them as read-only (readonly attribute in HTML).
Interviewer Note: 💡 A tricky form scenario. Strong candidates can explain the difference between control.disable() and element.setAttribute('readonly').
Inline functions in templates (e.g. {{ calculateResult() }}) execute on every change detection cycle.
Even if unrelated state changes (like a menu toggle), Angular executes the function to verify if the output changed. This degrades performance significantly.
// Bad Practice:
// <p>Result: {{ expensiveCalculation(userId) }}</p>
// Good Practice using Computed Signals:
// userId = signal('101');
// expensiveResult = computed(() => this.expensiveCalculation(this.userId()));
Interviewer Note: 💡 Check if the candidate knows how OnPush change detection interacts with template function runs. (Answer: Inline functions still run on every check triggered inside that component).
If an HTTP interceptor runs twice during a single routing action, check for these issues:
ngOnInit calls.Interviewer Note: 💡 Check if they discuss debugging HTTP flows using Chrome's Network Tab waterfall to trace requests.
Calling detectChanges() forces Angular to immediately check the component and its children. If a child updates a parent property (via bindings or lifecycle hooks) as a result of that run, the values will mismatch when the parent is checked next, throwing the error.
markForCheck(), which flags the component as dirty without forcing immediate, synchronous execution.Promise.resolve().then()) to defer execution to the next cycle.Interviewer Note: 💡 Candidates should know that detectChanges() forces immediate rendering, whereas markForCheck() schedules it for the next tick.
By default, route guards and resolvers execute only when route paths change.
If you set runGuardsAndResolvers: 'always', they execute on query parameter changes as well.
The Trap: If a guard or resolver updates query parameters (e.g., setting default pagination query params like ?page=1) as part of its execution logic, it will trigger another routing change, causing an infinite loop.
Interviewer Note: 💡 Good candidates suggest using skipLocationChange or checking current parameters before updating routing values.
By default, @ContentChildren and @ContentChild only search direct child elements projected into the component. If elements are nested inside other wrappers, they are skipped.
Solution: Pass { descendants: true } in the decorator query configuration to search the entire projected DOM tree recursively.
// Default only queries direct children
@ContentChildren(TabItemComponent) tabs!: QueryList<TabItemComponent>;
// Solution queries deep nested tabs
@ContentChildren(TabItemComponent, { descendants: true }) deepTabs!: QueryList<TabItemComponent>;
Interviewer Note: 💡 Check if the candidate knows when content query hooks execute (ngAfterContentInit).
An e-commerce site experiences rendering issues and console warnings (e.g. NG0500: Hydration mismatch) in production.
Dates and times change or flicker immediately after page load.
The server rendering engine builds page HTML using UTC timezone dates (e.g. 18:00 UTC).
When the client browser parses this, it renders dates in the user's local timezone (e.g. 13:00 EST).
This timezone difference creates mismatched HTML structure and text between client and server, causing hydration to fail.
<ng-container *browserOnly>) or wrap timezone-dependent date renders in lifecycle checks (e.g., updating state variables only after ngOnInit).Interviewer Note: 💡 Real hydration debugging experience. Look for clear understanding of the differences between server and client environments.
A customer service portal experiences browser slowdowns and crashes after multiple route transitions. Heap snapshots show component instances are retained in memory long after their DOM elements are destroyed.
Components register listeners on global, singleton services. If a component subscribes to a global service's RxJS Subject but fails to unsubscribe, the singleton service maintains a reference to the component's callback function in memory, preventing garbage collection.
takeUntilDestroyed() or the async pipe to automatically manage subscription lifecycles.Interviewer Note: 💡 Check if the candidate can outline how to analyze memory leaks using Chrome's Heap Profiler.
Users report that clicking navigation links makes the page feel frozen for several seconds before anything updates.
The route configuration contains resolvers that pre-fetch data from APIs. Because Angular Router blocks navigation until all resolvers emit and complete, slow API responses delay route transitions, leaving users with a frozen UI.
timeout() operator in resolvers, throwing fallback values if requests take too long.Interviewer Note: 💡 Strong candidates explain why lazy loading data at the component level with loading skeletons is preferred over blocking navigation with resolvers.
Opening a modal dialog makes the page backdrop grey, but the dialog itself renders behind the backdrop, preventing users from clicking anything.
The component triggering the dialog has CSS properties that create a new CSS stacking context (e.g. transform, will-change, z-index).
This forces the dynamic overlay container to render inside the child stacking context rather than at the root document body level, placing it behind the global backdrop.
transform or will-change on container components that trigger overlays, or adjust their stacking context rules.Interviewer Note: 💡 Look for candidate's CSS debugging skills, specifically their understanding of z-index and CSS stacking contexts.
The browser tab freezes, memory usage spikes, and the console repeatedly throws the error: Infinite change detection loop detected.
A component template invokes a function that calls a service method. This service updates application state, which triggers another change detection cycle. This cycle re-evaluates the template, calling the function again and creating an infinite loop.
computed() signals to cache calculated values.Interviewer Note: 💡 Ask the candidate: 'Why do template functions run on every change detection cycle?' (Answer: Because templates are re-evaluated to detect potential value shifts).
A high-traffic website experiences server crashes under heavy load, with logs showing OutOfMemoryError in the Node.js process.
Node.js does not have browser global variables like window or document.
To bypass library import issues, developers use global window polyfills (e.g. Domino). If third-party libraries write data to these global objects, memory accumulates across requests, eventually crashing the server.
isPlatformBrowser() checks, or inject mock window references scoped to individual requests.Interviewer Note: 💡 Excellent SSR test. Candidates should explain why global variables leak memory in multi-request server environments.
Create a directive that intercepts user clicks, routes them through an internal RxJS subject with `debounceTime`, and emits a custom output event.
import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@Directive({
selector: '[appDebounceClick]',
standalone: true
})
export class DebounceClickDirective implements OnInit, OnDestroy {
@Input() debounceTime = 500;
@Output() debouncedClick = new EventEmitter<any>();
private clicks = new Subject<any>();
private subscription!: Subscription;
ngOnInit() {
this.subscription = this.clicks.pipe(
debounceTime(this.debounceTime)
).subscribe(e => this.debouncedClick.emit(e));
}
@HostListener('click', ['$event'])
clickEvent(event: any) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
Interviewer Note: 💡 Verify they clean up the subscription inside ngOnDestroy to prevent memory leaks.
Create a structural directive that evaluates user roles. Inject TemplateRef and ViewContainerRef to dynamically render or destroy the template based on clearance.
import { Directive, Input, TemplateRef, ViewContainerRef, inject } from '@angular/core';
import { AuthService } from './auth.service';
@Directive({
selector: '[appRoleOnly]',
standalone: true
})
export class RoleOnlyDirective {
private templateRef = inject(TemplateRef);
private viewContainer = inject(ViewContainerRef);
private authService = inject(AuthService);
@Input() set appRoleOnly(requiredRole: string) {
if (this.authService.hasRole(requiredRole)) {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
Interviewer Note: 💡 Check if the candidate knows how structural directives manipulate the DOM using template refs and view container refs.
Create a class wrapper that stores application state in a private WritableSignal and exposes selectors as read-only Computed signals.
import { signal, computed, Signal } from '@angular/core';
export class Store<T> {
private stateSignal;
constructor(initialState: T) {
this.stateSignal = signal<T>(initialState);
}
select<K>(mapFn: (state: T) => K): Signal<K> {
return computed(() => mapFn(this.stateSignal()));
}
update(updateFn: (state: T) => Partial<T>) {
this.stateSignal.update(state => ({
...state,
...updateFn(state)
}));
}
}
Interviewer Note: 💡 Look for clean immutable update patterns inside the update function.
Create an interceptor that caches GET responses in an in-memory Map. If a user triggers a mutating request (POST, PUT, DELETE) to the same resource, clear the cache to ensure data freshness.
import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';
const cacheMap = new Map<string, HttpResponse<any>>();
export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
if (req.method !== 'GET') {
cacheMap.clear();
return next(req);
}
const cachedResponse = cacheMap.get(req.urlWithParams);
if (cachedResponse) {
return of(cachedResponse.clone());
}
return next(req).pipe(
tap(event => {
if (event instanceof HttpResponse) {
cacheMap.set(req.urlWithParams, event.clone());
}
})
);
};
Interviewer Note: 💡 Check if the candidate clones the cached response to prevent components from mutating shared cache objects.
Implement the ControlValueAccessor interface, mapping forms control API values (writeValue, registerOnChange, registerOnTouched) to custom inputs.
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-input',
standalone: true,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
],
template: `<input (input)="onInput($event)" [value]="value" />`
})
export class CustomInputComponent implements ControlValueAccessor {
value = '';
onChange = (val: string) => {};
onTouched = () => {};
writeValue(value: string): void { this.value = value || ''; }
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouched = fn; }
onInput(event: any) {
this.value = event.target.value;
this.onChange(this.value);
}
}
Interviewer Note: 💡 A core concept in enterprise Angular forms. Candidates must understand what writeValue, registerOnChange, and registerOnTouched do.
Build a container component (TabsGroup) that queries nested tab item child directives using @ContentChildren and displays the active tab template.
import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { TabItemComponent } from './tab-item.component';
@Component({
selector: 'app-tabs-group',
standalone: true,
template: `
<div class="tab-headers">
@for (tab of tabs; track tab.title) {
<button (click)="selectTab(tab)" [class.active]="tab.active">{{ tab.title }}</button>
}
</div>
<ng-content></ng-content>
`
})
export class TabsGroupComponent implements AfterContentInit {
@ContentChildren(TabItemComponent) tabs!: QueryList<TabItemComponent>;
ngAfterContentInit() {
const activeTab = this.tabs.find(t => t.active);
if (!activeTab && this.tabs.first) {
this.tabs.first.active = true;
}
}
selectTab(tab: TabItemComponent) {
this.tabs.forEach(t => t.active = false);
tab.active = true;
}
}
Interviewer Note: 💡 Check if the candidate knows to use ngAfterContentInit to access ContentChildren.
Using toObservable() inside a computed() signal creates an infinite loop or runtime error.
toObservable() requires an active injection context to look up DestroyRef and manage cleanups. computed() does not provide an injection context.computed() is resolved synchronously during evaluation, whereas toObservable() schedules value propagation asynchronously. Mixing these triggers race conditions and state sync errors.
Keep computed() pure and synchronous. If you need to convert signals to observables, call toObservable() in the component's constructor, then pipe operations in RxJS separately.
Interviewer Note: 💡 This question identifies candidates who rely on AI generated code, as AI models frequently mix injection contexts and async helpers inside computed blocks.
This injection mismatch occurs when the target service is registered inside route-level providers:
providers: [...]) instantiate services within the Route's EnvironmentInjector boundary.Interviewer Note: 💡 Tests deep injection hierarchy understanding. Candidates must explain how Environment Injectors differ from Component Injectors.
When an Angular form is reset, the framework calls writeValue(null) on the component.
If the component's internal state signal updates via signal.set(null), it will trigger an output emission change callback (onChange(null)).
This tells the parent form that the value changed, causing infinite update loops or restoring empty values immediately after resets.
Resolution: Only emit onChange callbacks in response to manual user actions (like clicks or keystrokes), never in response to programmatic framework calls like writeValue.
Interviewer Note: 💡 AI models often implement ControlValueAccessor by linking writeValue directly to state changes that fire onChange, leading to bugs when forms are reset.
Updating a signal inside a template function causes state changes during rendering:
Interviewer Note: 💡 Tests change detection timing. Strong candidates will explain how Zoneless mode protects against UI freeze cascades.
The Angular Router subscribes to resolver observables and waits for them to complete before completing the route transition.
The NEVER observable emits no values and never completes. As a result, the router's transition remains pending indefinitely without throwing errors, leaving the user with a frozen screen.
Safeguard: Always pipe resolvers through completion operators like take(1) or timeout() to guarantee they resolve and complete within a set timeframe.
Interviewer Note: 💡 Check if the candidate knows how router subscriptions handle observable completion.
takeUntilDestroyed() searches for the active injection context to find a DestroyRef reference.
If called inside a dynamic factory function that executes asynchronously outside of application bootstrap phases, the active injection context is lost.
If no context is found, takeUntilDestroyed throws an error or fails silently, leaving subscriptions active and leaking memory.
Resolution: Capture DestroyRef explicitly during class initialization and pass it as an argument: takeUntilDestroyed({ destroyRef }).
Interviewer Note: 💡 Excellent test for injection context boundaries. AI models often suggest takeUntilDestroyed() for all contexts, ignoring initialization requirements.
The on viewport trigger uses the Intersection Observer API under the hood, watching the @placeholder block's visibility.
height: 0px), it renders offscreen but shifts into the viewport during layout rendering. This triggers immediate loading of the deferred component even before user scrolls to it, defeating the purpose of lazy-loading.min-height: 200px) to preserve space and ensure Intersection Observer calculations are accurate.Interviewer Note: 💡 This question verifies if the candidate has practical experience with dynamic layout rendering, where CSS styles directly affect Angular's logical triggers.
When uploading files using FormData, the browser automatically calculates and appends the Content-Type: multipart/form-data; boundary=----WebKitFormBoundary... header.
If an interceptor intercepting requests clones the body and sets a static Content-Type: multipart/form-data header, the boundary token is lost.
The server will fail to parse the upload payload and return a 400 Bad Request error.
Resolution: In interceptors, never set the Content-Type header manually if the request body is an instance of FormData. Let the browser handle boundary assignments automatically.
Interviewer Note: 💡 A common production bug. AI models often suggest adding Content-Type headers globally in interceptors, which breaks multipart uploads.
An effect() registers its dependency watchers upon execution inside an active injection context.
If defined inside a dynamically called method (like a button click handler), the initialization phase has already finished.
Even if you pass an injector reference using runInInjectionContext(injector, () => { effect(...) }), the effect may fail to register cleanups correctly or trigger twice if the method runs multiple times, leading to memory leaks and unpredictable behavior.
Best Practice: Always define effects statically within constructor scopes or class field initialization phases. Do not instantiate them dynamically inside component methods.
Interviewer Note: 💡 Deep signal execution internals. Ensures the candidate understands that effects are design-time decorators rather than run-time event listeners.
In Zone.js applications, @HostListener('window:scroll') forces Angular to trigger change detection on the entire component tree every time the user scrolls a single pixel.
Even if the component uses OnPush change detection, the scroll event is intercepted by Zone.js, triggering layout checks and causing lag during scroll animations.
Resolution: Run the listener outside the zone using NgZone.runOutsideAngular(), or migrate the application to Zoneless Angular where event listeners do not trigger global change detection loops automatically.
Interviewer Note: 💡 Check if the candidate knows how Zone.js intercepts browser events and how to run code outside the zone.
The purpose of trackBy is to help Angular identify which items in a list have been added, removed, or re-ordered.
If your trackBy function returns the item's index (which is Angular's default behavior), the index of a re-ordered item remains the same.
Angular will reuse the existing DOM elements and simply update their inputs, causing unnecessary component re-renders and potentially leaving stale state in child components.
Resolution: Always return a unique identifier (like an id property) from trackBy functions so Angular can track the elements correctly.
Interviewer Note: 💡 Tests lists rendering internals. Candidates must explain why trackBy index is redundant and fails to optimize list re-ordering.
@ContentChildren queries elements that are instantiated and projected directly into the component's content.
When content is wrapped in a <ng-template>, the template is not instantiated immediately; it is treated as a blueprint.
Because the child elements do not exist in the DOM yet, the content query returns empty.
Resolution: Query the TemplateRef references instead, or instantiate the template dynamically using createEmbeddedView before querying its contents.
Interviewer Note: 💡 Advanced template projection. Candidates should explain the difference between eager content projection and lazy template rendering.
Adding provideHttpClient() to a route configuration creates a new instance of HttpClient scoped to that route's EnvironmentInjector.
Components inside this route will resolve this scoped HttpClient rather than the global one from app.config.ts.
As a result, HTTP requests sent from these components will only pass through interceptors registered in the route's provider list, completely bypassing global interceptors like auth tokens or error loggers.
Best Practice: Register provideHttpClient() only once in the root app.config.ts file. Avoid duplicating provider registrations in lazy-loaded routes.
Interviewer Note: 💡 Tests hierarchical injector knowledge. Strong candidates explain why duplicate provider declarations create isolated service instances.
Angular Signals check for updates using object reference equality (===).
If you modify a property of an object inside an array (e.g. users()[0].name = 'John'), the array reference itself does not change.
Because the reference is the same, the signal does not notify its consumers, and computed properties will not re-evaluate.
Resolution: Update signal state immutably by creating a new array reference containing copies of the updated objects:
this.users.update(list =>
list.map((u, i) => i === 0 ? { ...u, name: 'John' } : u)
);
Interviewer Note: 💡 Tests immutability requirements in reactive frameworks. AI models often suggest direct mutations, which breaks computed signal triggers.
Yes. The guide covers junior, mid-level and senior topics.
Yes. Modern Angular concepts such as Signals, SSR and Hydration are included.
Yes. Practical and architecture rounds are covered.
Yes, it covers junior through architect level topics.
Yes, practical, debugging and architecture rounds are included.