Top 200 Angular Interview Questions & Answers
Basic Questions (1-80)
Q1. What is Angular?
Angular is a TypeScript-based, open-source front-end web application framework developed and maintained by Google. It provides a comprehensive platform for building single-page applications (SPAs) with built-in tools for data binding, dependency injection, routing, forms, HTTP, and testing.
Q2. What is the difference between AngularJS and Angular?
AngularJS (Angular 1.x) uses JavaScript with an MVC architecture and two-way data binding via $scope and $watch. Angular (2+) is a complete rewrite using TypeScript, component-based architecture, hierarchical dependency injection, reactive programming (RxJS), and the Angular CLI — they are fundamentally different frameworks.
Q3. What is a Component in Angular?
A Component is the fundamental building block of Angular UI. It consists of a TypeScript class (with @Component decorator), an HTML template, and an optional CSS stylesheet. Components control a patch of screen called a view and communicate via @Input() and @Output() properties.
Q4. What is the @Component decorator?
The @Component decorator marks a class as an Angular component and provides metadata: selector (CSS selector for the element), templateUrl or template (HTML), styleUrls or styles (CSS), changeDetection strategy, providers, and encapsulation settings used by Angular to render the component.
Q5. What is a Module in Angular?
An NgModule (@NgModule decorator) is a cohesive block of code dedicated to a specific application domain, workflow, or feature set. It declares components, directives, and pipes; imports other modules; and exports components/directives/pipes for use in other modules. AppModule is the root module.
Q6. What is the AppModule?
AppModule (app.module.ts) is the root NgModule of an Angular application. It bootstraps the root component (AppComponent) in the bootstrap array, imports BrowserModule (required for browser rendering), and imports feature modules. Every Angular app has at least one NgModule — the root module.
Q7. What is Data Binding in Angular?
Data Binding is the synchronization mechanism between the component class and its template. Angular supports: Interpolation ({{ value }}), Property Binding ([property]="value"), Event Binding ((event)="handler()"), and Two-way Binding ([(ngModel)]="value") using the banana-in-a-box syntax.
Q8. What is Interpolation in Angular?
Interpolation ({{ expression }}) embeds component class properties or expressions into the HTML template as text content. Angular evaluates the expression and replaces the placeholder with its string value. It is a form of one-way data binding from component to view.
Q9. What is Property Binding in Angular?
Property Binding ([property]="expression") sets a target element's DOM property or child component's @Input() property to the value of a component class expression. Example: [src]="imageUrl" sets the img element's src property dynamically from the component.
Q10. What is Event Binding in Angular?
Event Binding ((event)="handler()") listens to a DOM event or child component EventEmitter and calls a method in the component class when the event fires. Example: (click)="onButtonClick()" calls the component's onButtonClick() method when the button is clicked.
Q11. What is Two-way Data Binding in Angular?
Two-way binding ([(ngModel)]="property") synchronizes data between the view and the component in both directions — view changes update the component, and component changes update the view. It combines Property Binding and Event Binding. Requires FormsModule to be imported.
Q12. What is a Directive in Angular?
A Directive is a class with a @Directive decorator that adds behavior to elements in the DOM. Angular provides built-in structural directives (*ngIf, *ngFor, *ngSwitch) that modify DOM layout, and attribute directives (ngClass, ngStyle) that modify element appearance or behavior.
Q13. What is the difference between structural and attribute directives?
Structural directives (prefixed with *) change DOM layout by adding or removing elements (*ngIf, *ngFor, *ngSwitch). Attribute directives change the appearance or behavior of an existing element without modifying DOM structure (ngClass, ngStyle, custom attribute directives).
Q14. What is *ngIf in Angular?
*ngIf is a structural directive that conditionally adds or removes an element from the DOM based on a boolean expression. When the condition is false, the element and its subtree are completely removed. The else clause (*ngIf="condition; else elseTemplate") shows an alternative ng-template.
Q15. What is *ngFor in Angular?
*ngFor is a structural directive that repeats a template for each item in an iterable. It provides exported values: index (current index), first, last, even, odd. The trackBy function (trackBy: trackByFn) improves performance by preventing unnecessary re-rendering of unchanged items.
Q16. What is a Pipe in Angular?
A Pipe transforms displayed data in templates using the pipe operator (|). Angular provides built-in pipes: DatePipe (date:'format'), UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, AsyncPipe (for Observables), JsonPipe, and SlicePipe. Custom pipes implement PipeTransform.
Q17. What is Dependency Injection in Angular?
Dependency Injection (DI) is Angular's mechanism for creating and delivering dependencies to components and services. The Angular injector creates service instances when requested and caches them. Services are provided at root (@Injectable({ providedIn: 'root' })), module, or component level.
Q18. What is a Service in Angular?
A Service is a class with a narrow, well-defined purpose (data fetching, business logic, utility functions) decorated with @Injectable(). Services are singletons when provided at root and are injected into components, other services, or directives via constructor injection.
Q19. What is @Injectable in Angular?
@Injectable() marks a class as a provider that can be injected by Angular's DI system. The providedIn: 'root' option registers the service with the root injector as a singleton available throughout the app without importing into any NgModule's providers array.
Q20. What is the Angular CLI?
Angular CLI (Command Line Interface) is a toolchain for creating, developing, building, testing, and deploying Angular projects. Key commands: ng new (create project), ng generate (create components/services), ng serve (dev server), ng build (production build), ng test (run unit tests), ng lint.
Q21. What is the Angular Router?
Angular Router (@angular/router) enables navigation between views/components based on URL changes in SPAs. Routes are defined as an array of path-component pairs; RouterModule.forRoot(routes) registers them. routerLink directive and Router.navigate() trigger navigation programmatically.
Q22. What is RouterLink in Angular?
RouterLink is a directive ([routerLink]="['/path']") that binds a clickable element to a navigation path in the Angular Router. It generates the correct href for the route and handles navigation without a full page reload, enabling SPA navigation behavior.
Q23. What is RouterOutlet in Angular?
RouterOutlet is a placeholder directive (<router-outlet></router-outlet>) that marks where the Angular Router should display the component for the active route. When navigation occurs, the Router inserts the matched component into the RouterOutlet location.
Q24. What is a Route Guard in Angular?
Route Guards are interfaces that control navigation to/from routes. CanActivate prevents unauthorized route access. CanDeactivate prevents leaving a route with unsaved changes. CanLoad prevents lazy-loaded module loading. Resolve pre-fetches data before route activation.
Q25. What is Lazy Loading in Angular?
Lazy Loading loads feature modules on-demand when a route is first navigated to, instead of including all modules in the initial bundle. Configured with loadChildren in route definitions: { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }.
Q26. What is the HttpClient in Angular?
HttpClient (@angular/common/http) is Angular's service for making HTTP requests (GET, POST, PUT, DELETE, PATCH). It returns RxJS Observables, enables typed responses, request/response interceptors, progress events, and automatic JSON parsing. Requires HttpClientModule in imports.
Q27. What is RxJS in Angular?
RxJS (Reactive Extensions for JavaScript) is a reactive programming library used throughout Angular. Angular uses Observables for HTTP responses, event streams (fromEvent), router events, and form value changes. Operators (map, filter, switchMap, catchError, debounceTime) transform and compose async data streams.
Q28. What is an Observable in Angular?
An Observable is a lazy, push-based data stream that emits values over time. Observables are subscribed to by calling .subscribe(nextFn, errorFn, completeFn). They are the foundation of Angular's async data handling, returned by HttpClient and other Angular APIs.
Q29. What is a Subject in RxJS?
A Subject is both an Observable (subscribable) and an Observer (can emit values via next(), error(), complete()). BehaviorSubject holds and emits the current value to new subscribers. ReplaySubject replays N past values. AsyncSubject emits only the last value on completion.
Q30. What is the async pipe in Angular?
The async pipe (| async) automatically subscribes to an Observable or Promise in the template, unwraps the value for display, and automatically unsubscribes when the component is destroyed. This prevents memory leaks and eliminates manual subscribe/unsubscribe boilerplate in components.
Q31. What are Angular Forms?
Angular provides two form approaches: Template-driven forms (FormsModule — ngModel in template, simple, two-way binding) and Reactive forms (ReactiveFormsModule — FormGroup/FormControl/FormBuilder in component code, explicit validation, testable, more scalable for complex forms).
Q32. What is a FormGroup in Angular?
FormGroup is a Reactive Forms class that groups multiple FormControl instances into a cohesive unit. The FormGroup tracks the overall validity (invalid if any child is invalid), value (object of all control values), and provides methods for getting/setting values and submitting forms.
Q33. What is a FormControl in Angular?
FormControl tracks the value and validation state of an individual form field. Properties include value, valid/invalid, touched/untouched, dirty/pristine, and errors. Validators (Validators.required, Validators.email, Validators.minLength, custom validators) are passed to the constructor.
Q34. What is FormBuilder in Angular?
FormBuilder is an injectable service that provides shorthand methods (group(), control(), array()) for creating FormGroup, FormControl, and FormArray instances more concisely, reducing repetitive new FormControl() instantiation boilerplate in component code.
Q35. What is ngModel in Angular?
ngModel is a two-way data binding directive (part of FormsModule) that creates a FormControl instance and binds it to a form element. [(ngModel)]="property" synchronizes the form element's value with the component property bidirectionally. Template-driven form's core binding mechanism.
Q36. What is the Angular Change Detection strategy?
Angular's change detection checks component templates for binding changes. Default strategy checks all components on every event. OnPush strategy (changeDetection: ChangeDetectionStrategy.OnPush) only checks the component when an @Input() reference changes, an Observable emits, or markForCheck() is called — improving performance.
Q37. What is ChangeDetectionStrategy.OnPush?
OnPush limits change detection to: @Input() reference changes (immutable data), async pipe emissions, events within the component, and manual markForCheck()/detectChanges() calls. It skips unnecessary checking of stable components, significantly improving performance in large component trees.
Q38. What is the ViewEncapsulation in Angular?
ViewEncapsulation controls CSS scoping for component styles. Emulated (default) adds unique attribute selectors to emulate Shadow DOM scoping. None applies styles globally. ShadowDom uses native browser Shadow DOM for true CSS isolation. Emulated is the most compatible choice.
Q39. What is the difference between @Input() and @Output()?
@Input() defines a property that a parent component can bind to, passing data into the child component. @Output() defines an EventEmitter property through which the child component emits events to the parent. Together they form the primary parent-child component communication mechanism.
Q40. What is EventEmitter in Angular?
EventEmitter (from @angular/core) is used with @Output() to emit custom events from child components to parent components. Child calls this.myEvent.emit(data); parent listens with (myEvent)="handleEvent($event)". EventEmitter extends RxJS Subject under the hood.
Q41. What is the Angular lifecycle hooks?
Angular lifecycle hooks are methods called at specific stages of a component/directive lifetime: ngOnChanges (input change), ngOnInit (after first ngOnChanges), ngDoCheck (every change detection), ngAfterContentInit/Checked, ngAfterViewInit/Checked, and ngOnDestroy (before destruction for cleanup).
Q42. What is ngOnInit() in Angular?
ngOnInit() is called once after the component's first ngOnChanges(), after Angular initializes the component's data-bound properties. It is the ideal place for initialization logic (HTTP calls, subscriptions setup) that shouldn't be in the constructor (which runs before Angular initializes properties).
Q43. What is ngOnDestroy() in Angular?
ngOnDestroy() is called just before Angular destroys the component/directive. It is used for cleanup: unsubscribing from Observables (to prevent memory leaks), canceling timers, detaching event handlers, and releasing any other resources held by the component.
Q44. What is the difference between ngAfterViewInit and ngAfterContentInit?
ngAfterContentInit is called after Angular projects external content (ng-content) into the component's view. ngAfterViewInit is called after Angular initializes the component's own view and child views. Use ngAfterViewInit for DOM operations on @ViewChild references.
Q45. What is @ViewChild in Angular?
@ViewChild(selector) queries the component's view for a child component, directive, or element and provides a reference. Available after ngAfterViewInit. Example: @ViewChild(MyComponent) myComp: MyComponent; or @ViewChild('myRef') el: ElementRef; for template reference variables.
Q46. What is @ContentChild in Angular?
@ContentChild(selector) queries the content projected via <ng-content> for a child component or element. Available after ngAfterContentInit. Used when a component acts as a container and needs to access elements slotted into it by the parent template.
Q47. What is ng-content in Angular?
ng-content is a content projection mechanism (similar to slot in Web Components) that allows a parent to insert HTML content into a child component's template. Multiple named slots (select=".header") enable multi-slot projection for flexible, reusable container components.
Q48. What is ng-template in Angular?
ng-template is an Angular element that defines a reusable template fragment that is not rendered directly. It is used with structural directives (*ngIf else, *ngFor), portals, and ngTemplateOutlet to conditionally render content. Templates are rendered only when explicitly instantiated.
Q49. What is ngTemplateOutlet in Angular?
ngTemplateOutlet (*ngTemplateOutlet="templateRef; context: ctx") inserts a template reference (ng-template) at the current location with optional context data. Used for reusable template patterns and passing templates as inputs to components for flexible layout customization.
Q50. What is an HttpInterceptor in Angular?
An HttpInterceptor intercepts outgoing HTTP requests and/or incoming responses for cross-cutting concerns: adding Authorization headers, logging, error handling, showing loading spinners, caching, and request transformation. Implemented as a class with the intercept() method, registered in providers.
Q51. What is the Angular compiler?
Angular compiles HTML templates and TypeScript code into efficient JavaScript. The Ivy compiler (default since Angular 9) compiles each component independently (locality principle), produces smaller bundle sizes, enables better tree-shaking, faster build times, and improved debugging with readable stack traces.
Q52. What is Ahead-of-Time (AOT) compilation?
AOT compiles Angular HTML templates and TypeScript code to JavaScript during the build phase, before the browser downloads and runs the code. Benefits: faster rendering (no compile step at runtime), smaller bundles (compiler excluded), earlier template error detection, and improved security.
Q53. What is Just-in-Time (JIT) compilation in Angular?
JIT compiles Angular templates and code in the browser at runtime. Used during development (ng serve) for faster rebuilds. The Angular compiler is included in the app bundle. JIT is slower for end users as compilation happens client-side; AOT is used for production builds.
Q54. What is tree-shaking in Angular?
Tree-shaking is the process of removing unused code from the production bundle. Angular's Ivy compiler and Webpack/Rollup remove unreferenced components, directives, pipes, and library code from the final bundle, significantly reducing bundle size. providedIn: 'root' enables service tree-shaking.
Q55. What is the Angular testing framework?
Angular uses Jasmine (test framework: describe, it, expect) with Karma (test runner that executes tests in browsers) for unit tests. TestBed is Angular's testing utility for configuring a testing module, creating components, injecting services, and triggering change detection in tests.
Q56. What is TestBed in Angular?
TestBed is the primary Angular testing module configuration utility. TestBed.configureTestingModule({ declarations, imports, providers }) sets up a testing NgModule. createComponent() creates component instances for testing; inject() gets service instances; fixture.detectChanges() triggers change detection.
Q57. What is the purpose of ngZone in Angular?
NgZone is Angular's execution context that wraps async operations (setTimeout, Promises, event handlers) and automatically triggers change detection after each async operation completes. ngZone.runOutsideAngular() runs code outside Angular's zone, preventing unnecessary change detection cycles for performance-critical code.
Q58. What is a SharedModule in Angular?
SharedModule is a common module pattern that declares and exports frequently used components, directives, and pipes (CommonModule, FormsModule, shared UI components) needed by multiple feature modules. Feature modules import SharedModule instead of individually re-importing common dependencies.
Q59. What is a CoreModule in Angular?
CoreModule is a convention for housing singleton services (AuthService, ApiService) and one-time-use components (NavbarComponent, FooterComponent) that are instantiated once for the entire application. CoreModule is imported only in AppModule and guards against re-import via its constructor.
Q60. What is the difference between declarations, imports, exports, and providers in NgModule?
declarations: components/directives/pipes belonging to this module. imports: other modules whose exports are needed. exports: components/directives/pipes available to other modules that import this module. providers: services available for DI within this module's component tree (pre-Ivy; prefer providedIn: 'root').
Q61. What is the Angular environment file?
Angular environment files (src/environments/environment.ts, environment.prod.ts) store environment-specific configuration (API URLs, feature flags, debug settings). The Angular build system swaps environment.ts with the correct environment file based on the build configuration (--configuration=production).
Q62. What is the angular.json file?
angular.json is the workspace configuration file for the Angular CLI. It defines project structure, build options (output path, assets, styles, scripts, file replacements), serve options, test configuration, and architect targets for each project in the workspace.
Q63. What is the tsconfig.json in Angular?
tsconfig.json configures the TypeScript compiler for the Angular project: strict mode, target ES version, module system, paths (for module aliases), decorators support, and lib entries. Angular requires specific TypeScript settings (enableIvy, experimentalDecorators, emitDecoratorMetadata).
Q64. What is a resolver in Angular routing?
A Resolver (implementing Resolve interface) pre-fetches data required by a route before the component is activated and displayed. The resolved data is available in the route's data property. This ensures the component renders with data immediately, avoiding loading states in the component itself.
Q65. What is the ActivatedRoute in Angular?
ActivatedRoute provides information about the currently activated route: params (URL parameters), queryParams, data (resolver data), fragment, url, and parent/child route references. Injected into components to access route information for component initialization and navigation logic.
Q66. What is the Router service in Angular?
The Router service provides programmatic navigation (router.navigate(['/path', id], { queryParams: {} })), URL manipulation, and router event streams (NavigationStart, NavigationEnd, NavigationError). Injected to navigate dynamically after form submissions, authentication, or business logic operations.
Q67. What is the difference between pathMatch: 'full' and 'prefix' in routes?
pathMatch: 'full' matches only when the entire URL matches the route path — used for the empty path redirect ({ path: '', redirectTo: '/home', pathMatch: 'full' }). pathMatch: 'prefix' (default) matches if the URL begins with the path, suitable for parent routes with children.
Q68. What is the HttpClientModule in Angular?
HttpClientModule (from @angular/common/http) provides Angular's HTTP client functionality. It must be imported into AppModule (or a CoreModule) to make HttpClient injectable throughout the application. Without this import, injecting HttpClient throws a NullInjectorError.
Q69. What is error handling in Angular HttpClient?
HTTP errors are caught using RxJS operators: catchError() catches error Observables and returns a recovery Observable or rethrows. throwError() rethrows errors. HttpErrorResponse provides status (404, 500), error body, and headers. An HttpInterceptor can centralize error handling for all requests.
Q70. What is ngClass in Angular?
ngClass (attribute directive) dynamically adds or removes CSS classes on an element. Accepts a string ('my-class'), array (['class1', 'class2']), or object ({ 'active': isActive, 'disabled': isDisabled }). Enables conditional CSS class application based on component state.
Q71. What is ngStyle in Angular?
ngStyle dynamically sets inline CSS styles on an element based on an object expression: [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }". Useful for dynamic styling that cannot be achieved through class toggles alone — e.g., dynamic color values from user input.
Q72. What is the CommonModule in Angular?
CommonModule (from @angular/common) provides common directives (*ngIf, *ngFor, *ngSwitch, ngClass, ngStyle) and pipes (DatePipe, CurrencyPipe, DecimalPipe) used in most components. BrowserModule includes CommonModule and is imported only in AppModule; feature modules import CommonModule directly.
Q73. What is a Pure vs Impure Pipe in Angular?
Pure pipes (default: pure: true) are called only when the input reference changes — Angular detects object/array changes only by reference, not deeply. Impure pipes (pure: false) run on every change detection cycle regardless of input changes, enabling deep-change detection but at performance cost.
Q74. What is template reference variable in Angular?
A template reference variable (#refName) declares a reference to a DOM element, component, or directive within a template: <input #myInput> <button (click)="log(myInput.value)">. References are accessible within the template scope and can be passed to event handlers.
Q75. What is the safe navigation operator (?.) in Angular templates?
The safe navigation operator (?.) guards against null/undefined access in template expressions: {{ user?.address?.city }} renders nothing instead of throwing a TypeError when user or address is null/undefined. Essential for displaying optional nested object properties safely.
Q76. What is the non-null assertion operator (!) in Angular templates?
The non-null assertion operator (!) asserts to TypeScript that a value is not null/undefined: {{ user!.name }}. Used to suppress TypeScript strict null check warnings in templates when you are certain the value exists at that point in the template evaluation lifecycle.
Q77. What is the purpose of BrowserAnimationsModule?
BrowserAnimationsModule (from @angular/platform-browser/animations) enables Angular's animation system in browser-based applications. Required for Material Design component animations and custom @angular/animations trigger-based animations. NoopAnimationsModule disables animations for testing.
Q78. What are Angular animations?
Angular animations (@angular/animations) define declarative animations using triggers, states, transitions, and keyframes in component metadata (animations: array). The animate() function specifies timing; style() defines CSS properties at each state. Attached to elements via [@triggerName]="state" binding.
Q79. What is Angular Material?
Angular Material is Google's official Material Design component library for Angular, providing pre-built UI components: buttons, forms, cards, toolbars, dialogs, tables, date pickers, navigation drawers, and more. Components follow Material Design 3 guidelines and integrate with Angular's theming system.
Q80. What is the Angular CDK (Component Dev Kit)?
Angular CDK (Component Dev Kit) provides behavior primitives (drag-and-drop, virtual scrolling, overlay positioning, accessibility, portals, bidirectional text) without Material Design styling. The CDK is used by Angular Material internally and by developers building custom UI components needing these behaviors.
Intermediate Questions (81-150)
Q81. What is standalone component in Angular 14+?
Standalone components (standalone: true in @Component decorator) don't need to be declared in an NgModule. They import their dependencies directly in the imports array of @Component. Standalone components simplify Angular architecture and enable tree-shakable component-level dependency management without NgModules.
Q82. What is the new Angular bootstrap with standalone components?
With Angular 15+, apps can bootstrap without a root NgModule using bootstrapApplication(AppComponent, { providers: [...] }) in main.ts. Feature routes use loadComponent() for lazy loading standalone components instead of loadChildren() for NgModules. This is the recommended modern Angular architecture.
Q83. What are Angular Signals?
Angular Signals (Angular 16+) are reactive primitives for state management: signal(initialValue) creates a writable signal; computed(() => signal1() + signal2()) creates derived values; effect(() => { console.log(signal()) }) runs side effects when signals change. Signals integrate directly with Angular's change detection for fine-grained reactivity.
Q84. What is the difference between signal and BehaviorSubject?
Signals are synchronous, read with signal() function call, don't require RxJS, and integrate directly with Angular change detection (OnPush). BehaviorSubject is an RxJS Observable requiring subscribe(). Signals are simpler for local component state; BehaviorSubject is better for complex async streams and RxJS interop.
Q85. What is the inject() function in Angular?
inject() (Angular 14+) is a functional way to inject dependencies without constructor parameters. Used in standalone components, functional guards/resolvers, and injection contexts outside constructors. inject(HttpClient) is equivalent to constructor injection but enables cleaner composition patterns.
Q86. What are functional Route Guards in Angular 14+?
Functional guards replace class-based guards (CanActivate interface) with simple functions: const authGuard: CanActivateFn = (route, state) => inject(AuthService).isAuthenticated(). They are simpler, tree-shakeable, and composable. Registered directly in route definitions as canActivate: [authGuard].
Q87. What is deferrable views in Angular 17?
@defer block (Angular 17+) lazily loads a block of content (components, pipes, directives) with configurable triggers: @defer (on idle), @defer (on viewport), @defer (on interaction), and @defer (when condition). Reduces initial bundle size by splitting lazily loaded UI sections at the template level.
Q88. What is the control flow syntax in Angular 17?
Angular 17 introduced built-in control flow syntax replacing structural directives: @if (condition) { } @else { }, @for (item of items; track item.id) { }, and @switch (expr) { @case (val) { } }. The new syntax is more readable, requires no NgModule imports, and @for requires a track expression for performance.
Q89. What is the NgOptimizedImage directive?
NgOptimizedImage (Angular 15+, from @angular/common) enforces image optimization best practices: sets width/height to prevent CLS, generates srcset for responsive images, prioritizes LCP images (priority attribute), and integrates with image CDNs (ImageLoader) for automatic image optimization URLs.
Q90. What is the purpose of provideRouter() in Angular?
provideRouter(routes) is the functional equivalent of RouterModule.forRoot(routes) for standalone applications. It registers the router with the application providers. withPreloading(), withDebugTracing(), withHashLocation(), and withLazyLoading() are additional features composable with provideRouter().
Q91. What is the Angular DevTools extension?
Angular DevTools is a Chrome/Firefox browser extension for debugging Angular applications. It provides component tree inspection (inputs, outputs, state), change detection performance profiling (flame graphs showing which components are checked and how long), and dependency injection graph visualization.
Q92. What is the purpose of OnPush with Signals?
Components using Signals with OnPush change detection automatically schedule recheck when a signal they read changes — without needing markForCheck(). This makes Signals + OnPush the recommended pattern for efficient reactive Angular applications, replacing Observable + async pipe patterns.
Q93. What is the Zone.js library in Angular?
Zone.js patches all async APIs (setTimeout, Promise, XMLHttpRequest, addEventListener) to intercept async operations. Angular uses zones to know when async operations complete and trigger change detection automatically. Zoneless Angular (Angular 18+) removes Zone.js dependency using Signals for explicit change notification.
Q94. What is Zoneless Angular?
Zoneless Angular (Angular 18+, experimental → stable) removes the Zone.js dependency, reducing bundle size and improving performance. Components use Signals or explicit markForCheck() to notify Angular of state changes. provideExperimentalZonelessChangeDetection() enables zoneless mode.
Q95. What is the purpose of the takeUntilDestroyed operator?
takeUntilDestroyed() (Angular 16+, from @angular/core/rxjs-interop) automatically completes an Observable subscription when the component is destroyed, replacing the manual takeUntil(this.destroy$) + Subject pattern. Requires injection context (used in constructor or with DestroyRef).
Q96. What is toSignal() in Angular?
toSignal() (from @angular/core/rxjs-interop) converts an RxJS Observable to an Angular Signal, enabling consumption of existing RxJS streams in Signal-based components. The signal reflects the Observable's latest emission. Must be called in an injection context (constructor or inject()).
Q97. What is toObservable() in Angular?
toObservable() converts an Angular Signal to an RxJS Observable, enabling Signal values to participate in RxJS operator pipelines. It emits the signal's current value immediately on subscription and on every subsequent signal change. Used to bridge Signal and Observable ecosystems.
Q98. What is the Angular Ivy rendering engine?
Ivy is Angular's production rendering engine (default since Angular 9). It compiles each component independently (locality), generates smaller code by removing unnecessary runtime metadata, produces human-readable compiled code in .d.ts files (ngcc-compatible), and enables incremental compilation for faster builds.
Q99. What is the purpose of the Component Input binding from routes?
Angular 16+ allows route parameters, query parameters, and resolver data to bind directly to component @Input() properties via Router bindToComponentInputs option. withComponentInputBinding() in provideRouter() enables components to receive route data as inputs without injecting ActivatedRoute.
Q100. What is the Angular Router functional resolver?
Functional resolvers (Angular 14+) replace class-based Resolve implementations with functions: const dataResolver: ResolveFn<Data> = (route, state) => inject(DataService).getById(route.params['id']). Simpler, composable, and leverages inject() for dependency access within the functional context.
Q101. What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?
switchMap cancels the previous inner Observable when a new source emission arrives — for search queries. mergeMap runs all inner Observables concurrently. concatMap queues inner Observables sequentially. exhaustMap ignores new source emissions while the current inner Observable is active — for button click protection.
Q102. What is debounceTime in RxJS and how is it used in Angular?
debounceTime(ms) delays emitting a value until the source is silent for the specified milliseconds. Used in search input handlers: valueChanges.pipe(debounceTime(300), distinctUntilChanged(), switchMap(q => this.search(q))) prevents HTTP requests on every keystroke, waiting for user to pause typing.
Q103. What is distinctUntilChanged in RxJS?
distinctUntilChanged() filters out consecutive duplicate emissions — only emits when the current value differs from the previous. Used with form valueChanges and state streams to prevent redundant processing when the value hasn't actually changed between emissions (e.g., user types and deletes same character).
Q104. What is forkJoin in RxJS?
forkJoin([obs1, obs2, obs3]) waits for all Observables to complete and emits a single array of their final values. Used for parallel HTTP requests where all responses are needed before proceeding: forkJoin([http.get('/users'), http.get('/products')]).subscribe(([users, products]) => { ... }).
Q105. What is combineLatest in RxJS?
combineLatest([obs1, obs2]) emits an array of the latest values from each source Observable whenever any source emits (after all sources have emitted at least once). Used to combine multiple state streams: combineLatest([filters$, pagination$]).pipe(switchMap(([f, p]) => this.search(f, p))).
Q106. What is the purpose of Angular Universal (Server-Side Rendering)?
Angular Universal renders Angular components on the server (Node.js) to generate static HTML sent to the browser. Benefits: improved SEO (search engine crawlability), faster First Contentful Paint (FCP), better performance on low-powered devices, and social media link preview support.
Q107. What is the purpose of Angular prerendering?
Prerendering (Static Site Generation — SSG) generates static HTML for routes at build time instead of runtime. Angular 17+ supports prerendering via ng build --prerender, generating static HTML files for known routes. Faster than SSR for content that doesn't change per request.
Q108. What is NgRx in Angular?
NgRx is a state management library for Angular based on the Redux pattern (Store, Actions, Reducers, Effects, Selectors). Store holds immutable global state; Actions describe state change events; Reducers produce new state; Effects handle async side effects; Selectors derive computed state from the store.
Q109. What is an NgRx Effect?
NgRx Effects are services listening to the Actions stream and performing side effects (HTTP calls, local storage, navigation) that dispatch new Actions. createEffect(() => actions$.pipe(ofType(loadData), switchMap(() => http.get(...).pipe(map(dataLoaded), catchError(loadDataFailed))))) is the standard Effect pattern.
Q110. What is an NgRx Selector?
Selectors are pure functions that derive and memoize data from the NgRx store state. createSelector(featureSelector, state => state.items) composes selectors and memoizes results — preventing unnecessary recomputation when unrelated state changes. Selectors return Observables that components subscribe to.
Q111. What is the Signals-based store (NgRx Signals)?
NgRx SignalStore (Angular 17+) is a lightweight, Signals-based state management solution: signalStore({ withState, withComputed, withMethods, withHooks }) composable store factories create type-safe, fine-grained reactive stores without Redux boilerplate, suitable for local and feature-level state management.
Q112. What is NgRx Component Store?
NgRx Component Store is a standalone state management solution for individual components or feature sections, avoiding global store overhead. ComponentStore provides updater(), effect(), and select() methods for managing local component state reactively with RxJS — between local state and global NgRx store in complexity.
Q113. What is the purpose of Angular ESBuild builder?
Angular 17+ uses ESBuild as the default build tool (via the application builder), replacing Webpack. ESBuild is 10-100x faster than Webpack for JavaScript bundling, dramatically reducing build times for large Angular applications. The Vite dev server replaces webpack-dev-server for instant HMR.
Q114. What is Hot Module Replacement (HMR) in Angular?
HMR (Hot Module Replacement) replaces modified modules in the running application without a full browser reload, preserving application state. Angular 17+ with the ESBuild/Vite builder provides near-instant HMR, replacing the slow webpack-based live reload for a faster development experience.
Q115. What is the purpose of the HttpClient provideHttpClient() function?
provideHttpClient() (Angular 15+) is the functional alternative to importing HttpClientModule, used in standalone applications. provideHttpClient(withInterceptorsFromDi()) enables DI-based interceptors; withInterceptors([interceptorFn]) enables functional interceptors without class-based providers.
Q116. What is a functional HTTP interceptor in Angular?
Functional interceptors (Angular 15+) are functions implementing HttpInterceptorFn: (req: HttpRequest, next: HttpHandlerFn) => Observable<HttpEvent>. They replace class-based HttpInterceptor implementations, leveraging inject() for dependencies and composing as an array in provideHttpClient(withInterceptors([...])).
Q117. What is the purpose of the @let syntax in Angular templates (Angular 18)?
@let in Angular 18+ declares local template variables: @let user = user$ | async; @if (user) { {{ user.name }} }. This replaces the ngIf as hack for async pipe unwrapping, enabling cleaner template code with named variables for complex async expressions used multiple times.
Q118. What is Angular's hydration feature?
Hydration (Angular 16+) reuses the server-rendered DOM during client-side bootstrapping, instead of destroying and recreating it. provideClientHydration() enables hydration in SSR apps, improving LCP and Time to Interactive (TTI) by avoiding unnecessary DOM manipulation on initial page load.
Q119. What is incremental hydration in Angular?
Incremental Hydration (Angular 19+) hydrates parts of the server-rendered DOM lazily — only when needed (on viewport, on interaction, on idle) — using @defer block semantics. This reduces JavaScript execution on initial load, improving performance for content-heavy pages.
Q120. What is the purpose of the @angular/build package?
@angular/build provides the application builder (using ESBuild + Vite) that replaced @angular-devkit/build-angular for Angular 17+ projects. It offers faster build times, Vite dev server, better ESM output, and enhanced SSR capabilities as the core build toolchain for modern Angular applications.
Q121. What is the Angular workspace vs project?
An Angular workspace (created with ng new) contains one or more projects. A project is either an application (ng generate application) or a library (ng generate library). Multiple projects in a monorepo share the same node_modules and angular.json configuration, enabling shared code via library projects.
Q122. What is an Angular library project?
An Angular library (ng generate library my-lib) is a reusable package of components, services, pipes, and directives. Libraries are built with ng build my-lib, packaged for npm publication, and consumed via the Angular CDK's ng-packagr tool which generates proper ESM/UMD bundles with FESM format.
Q123. What is the purpose of secondary entry points in Angular libraries?
Secondary entry points (e.g., @angular/common/http, @angular/cdk/drag-drop) split large libraries into independently importable sub-packages, enabling tree-shaking — only the imported entry point's code is included in the consuming app's bundle rather than the entire library.
Q124. What is the difference between BehaviorSubject and ReplaySubject?
BehaviorSubject requires an initial value and always emits the current value to new subscribers. ReplaySubject buffers N past emissions (or all, if bufferSize is not set) and replays them to new subscribers without needing an initial value. ReplaySubject(1) is similar to BehaviorSubject without initial value requirement.
Q125. What is the purpose of catchError in Angular HTTP?
catchError() intercepts error notifications from an Observable and returns a recovery Observable or rethrows. In HTTP: catchError(err => { if (err.status === 401) this.auth.logout(); return throwError(() => err); }). Used in services and interceptors for centralized error handling and recovery logic.
Q126. What is the retry operator in RxJS?
retry(n) resubscribes to the source Observable up to n times on error, enabling automatic retry for transient network failures. retryWhen() (deprecated) or retry({ delay: retryStrategy }) provides custom retry timing with exponential backoff for resilient HTTP request handling.
Q127. What is the purpose of the tap operator in RxJS?
tap(sideEffectFn) performs side effects (logging, analytics, triggering other operations) for each emission without modifying the stream values. tap() is the debug and side-effect operator: .pipe(tap(val => console.log(val)), map(val => transform(val))). Does not alter the Observable stream.
Q128. What is the shareReplay operator in RxJS?
shareReplay(1) multicasts an Observable, replaying the last 1 emission to late subscribers — preventing duplicate HTTP requests when multiple components subscribe to the same source. Used for caching HTTP responses: http.get('/config').pipe(shareReplay(1)) shares the response across all subscribers.
Q129. What is the purpose of scan in RxJS?
scan(accumulator, seed) applies an accumulator function over the source, emitting the accumulated value on each emission — like Array.reduce() but over time. Used for building accumulated state from event streams: actions$.pipe(scan((state, action) => reducer(state, action), initialState)).
Q130. What is FormArray in Angular Reactive Forms?
FormArray is a Reactive Forms class managing a dynamic array of FormControl/FormGroup instances. Items are added with push(), removed with removeAt(), and reset with clear(). Ideal for dynamic forms with variable numbers of items: multiple phone numbers, address entries, or survey questions.
Q131. What is a custom Validator in Angular?
Custom validators are functions returning ValidatorFn: (control: AbstractControl) => ValidationErrors | null. Return { passwordMismatch: true } if invalid, null if valid. Applied to FormControl: new FormControl('', [Validators.required, customValidator()]). Async validators (AsyncValidatorFn) return Observable<ValidationErrors | null>.
Q132. What is updateOn in Angular forms?
updateOn controls when value and validity are recalculated: 'change' (default — on every keystroke), 'blur' (when the user leaves the field), 'submit' (only on form submission). Set per FormControl or globally on FormGroup to optimize validation timing and API calls.
Q133. What is the purpose of the Route preloading strategy?
Preloading strategies automatically load lazy modules in the background after the initial module loads: PreloadAllModules preloads all lazy routes immediately. QuicklinkStrategy (library) preloads only routes with visible RouterLinks. Custom strategies implement PreloadingStrategy to define selective preloading logic.
Q134. What is the withPreloading strategy option?
withPreloading(PreloadAllModules) (in provideRouter()) configures the preloading strategy for lazy-loaded routes. After the app initializes, Angular preloads lazy modules matching the strategy in the background, making subsequent navigation instant without affecting initial load performance.
Q135. What is the purpose of the Angular i18n system?
Angular i18n (internationalization) marks strings in templates with the i18n attribute for translation. The ng extract-i18n command extracts marked strings to XLIFF/XMB/ARB files. Translation files are compiled into locale-specific app bundles at build time for zero runtime translation overhead.
Q136. What is the purpose of the $localize function?
$localize is Angular's runtime i18n tagging function for code-based strings (not templates): $localize`Hello ${name}!`. It participates in Angular's compile-time translation process (with @angular/localize) and enables runtime translation (LOCALE_ID provider) as an alternative to build-time locale compilation.
Q137. What is the TransferState API in Angular SSR?
TransferState allows data fetched server-side to be transferred to the client without re-fetching on hydration. Server stores data with transferState.set(); client reads it with transferState.get(). withHttpTransferCache() in provideHttpClient() automates HTTP response caching for SSR hydration.
Q138. What is the APP_INITIALIZER token in Angular?
APP_INITIALIZER is a multi-provider token that registers functions to execute during application initialization (before components are created). Used for loading runtime configuration, initializing authentication state, or fetching essential app data before the first render. Returns a Promise or Observable.
Q139. What is the purpose of forwardRef() in Angular?
forwardRef() allows referencing a class before it is declared. Used in circular dependency scenarios: providing a class that refers to itself (useExisting: forwardRef(() => MyComponent)) or registering a provider that the module hasn't processed yet in the class definition order.
Q140. What is the InjectionToken in Angular?
InjectionToken<T> creates a token for providing and injecting non-class dependencies (strings, objects, configuration). const API_URL = new InjectionToken<string>('API_URL'); providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]; inject(API_URL) retrieves the value.
Q141. What is the difference between useClass, useValue, useFactory, and useExisting?
DI provider types: useClass (instantiate a class), useValue (provide a constant), useFactory (call a factory function to create the value), useExisting (alias one token to another existing token). All are configuration options in { provide: TOKEN, useClass/Value/Factory/Existing: ... } provider objects.
Q142. What is the purpose of multi: true in providers?
multi: true allows multiple providers to be registered for the same token, forming an array of values. { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true } adds MyInterceptor to Angular's interceptor chain without replacing previously registered interceptors.
Q143. What is the purpose of ElementRef in Angular?
ElementRef wraps a native DOM element reference, providing direct DOM access via elementRef.nativeElement. Used sparingly for DOM operations not achievable through Angular's template binding. Direct DOM manipulation bypasses Angular's security sanitization — prefer Renderer2 for platform-agnostic, XSS-safe DOM manipulation.
Q144. What is Renderer2 in Angular?
Renderer2 provides a platform-agnostic API for DOM manipulation (createElement, setAttribute, appendChild, addClass, setStyle, listen) that works across browser, server (SSR), and Web Worker environments — unlike direct nativeElement manipulation. It applies Angular's security context for XSS prevention.
Q145. What is the DomSanitizer in Angular?
DomSanitizer sanitizes values to be safe for use in different DOM contexts: sanitize(SecurityContext.HTML, value) for innerHTML, bypassSecurityTrustHtml(), bypassSecurityTrustUrl(), bypassSecurityTrustResourceUrl(). Required when binding external content that Angular would otherwise sanitize to prevent XSS attacks.
Q146. What is the purpose of the ErrorHandler in Angular?
ErrorHandler is an Angular service with handleError(error) that catches all uncaught errors in the application. The default implementation logs errors to the console. Custom ErrorHandler implementations send errors to monitoring services (Sentry, Datadog) for production error tracking and alerting.
Q147. What is the purpose of ComponentFactoryResolver (deprecated)?
ComponentFactoryResolver (deprecated in Angular 13+) dynamically created components at runtime. Replaced by ViewContainerRef.createComponent(ComponentClass) which works directly with Ivy-compiled components without factory intermediaries. Dynamic component creation is used for dialogs, tooltips, and dynamic content rendering.
Q148. What is NgComponentOutlet in Angular?
NgComponentOutlet (*ngComponentOutlet="componentClass") dynamically renders a component given its class reference, without ViewContainerRef boilerplate. Supports inputs (ngComponentOutletInputs), the injector, and content projection (ngComponentOutletContent) for flexible dynamic component rendering in templates.
Q149. What is the purpose of the Cypress testing tool in Angular?
Cypress is an end-to-end testing framework for Angular applications. It runs tests in a real browser, provides time-travel debugging (screenshot at each step), automatic waiting, and network request stubbing. Angular CLI integrates Cypress via @cypress/schematic for E2E testing replacing the deprecated Protractor.
Q150. What is the purpose of Playwright in Angular testing?
Playwright is Microsoft's E2E testing framework supporting Chrome, Firefox, Safari, and mobile viewports. It runs Angular E2E tests with auto-waiting, network mocking, parallel test execution, and trace viewer for debugging. Angular teams use Playwright as a modern Protractor/Selenium replacement.
Advanced Questions (151-200)
Q151. What is the Angular compiler architecture with Ivy?
Ivy uses the Angular Language Service for IDE intelligence and the ngtsc TypeScript compiler plugin to transform TypeScript/HTML into JavaScript. ngtsc emits Angular-specific code by generating component factories, directive definitions, and pipe definitions directly into compiled .js output using Angular's declarative IR (Intermediate Representation).
Q152. What is the purpose of the Angular Compiler API?
The Angular Compiler API (compileComponentFromMetadata, compilePipeFromMetadata) enables programmatic compilation of Angular code, used in testing utilities, Schematics, and tooling (Language Service). Advanced use cases include runtime compilation for dynamically generated templates.
Q153. What is the purpose of the Angular Language Service?
Angular Language Service provides IDE features for Angular templates: autocompletion, type checking, quick info (hover), and diagnostics (error highlighting) in HTML template files. Implemented as a TypeScript Language Service plugin, it integrates with VS Code (Angular plugin) and WebStorm for enhanced template editing.
Q154. What is the purpose of ng-content select attribute?
Content projection with select=".header" (CSS selector) slots projected content into specific ng-content slots based on element attributes, classes, or tags. This enables multi-slot content projection for complex container components: separate slots for header, body, and footer content passed from the parent.
Q155. What is micro-frontend architecture with Angular?
Micro-frontends split a large Angular application into independently deployable front-end modules owned by different teams. Native Federation (Vite-based Module Federation) or Webpack Module Federation enables runtime composition of separately built Angular applications into a unified shell application.
Q156. What is Module Federation in Angular?
Module Federation (Webpack 5) enables sharing code between separately built Angular applications at runtime. @angular-architects/module-federation provides Angular-specific configuration. The host app loads remote modules (components, routes) from separate deployed apps, enabling micro-frontend runtime composition.
Q157. What is the purpose of Native Federation?
Native Federation (from @angular-architects/native-federation) provides Module Federation-like micro-frontend capabilities using ESM import maps and Vite/ESBuild instead of Webpack, making it compatible with Angular's new ESBuild-based build system (Angular 17+) for modern, standards-based micro-frontend architecture.
Q158. What is the purpose of custom build schematics in Angular?
Angular Schematics are code-generation and transformation scripts (ng add, ng generate, ng update). Custom schematics automate project scaffolding (creating components with company conventions), applying migrations across codebases, and generating boilerplate code, ensuring consistency across large teams.
Q159. What is the purpose of @angular/ssr package?
@angular/ssr (Angular 17+) provides Angular's official SSR support, replacing @nguniversal/express-engine. It integrates server rendering with the application builder, provides app.config.server.ts for server-specific providers, and supports Express/Node.js for serving SSR Angular applications.
Q160. What is the difference between SSR, SSG, and CSR in Angular?
CSR (Client-Side Rendering): Angular renders in the browser — bad for SEO, fast after load. SSR (Server-Side Rendering): Angular Universal renders HTML on the server per request — good for SEO, dynamic content. SSG (Static Site Generation/Prerendering): HTML generated at build time — best performance, suitable for static content.
Q161. What is the purpose of HostBinding and HostListener decorators?
@HostBinding('class.active') binds a component/directive property to an attribute/class/style of the host element. @HostListener('click', ['$event']) listens to events on the host element and calls the decorated method. Used in directives to interact with the element they are applied to without template access.
Q162. What is the host property in @Component and @Directive?
The host property in @Component/@Directive metadata declaratively sets host bindings and listeners as a metadata object: host: { '[class.active]': 'isActive', '(click)': 'onClick()' }. Functionally equivalent to @HostBinding/@HostListener but collocated in the decorator for readability.
Q163. What is the Angular CDK Virtual Scroll?
CDK Virtual Scroll (CdkVirtualScrollViewport) renders only the visible items in a scrollable list, creating and destroying DOM elements as the user scrolls. Dramatically improves performance for lists of thousands of items by keeping the rendered DOM small regardless of total item count.
Q164. What is the Angular CDK Portal?
CDK Portal enables rendering content (components, templates) in a dynamic location outside the component tree — in a portal outlet. Used for overlays (modals, tooltips, dropdowns) where content must render outside the current component hierarchy to avoid z-index and overflow clipping issues.
Q165. What is the Angular CDK Overlay?
CDK Overlay creates floating panels (tooltips, dropdowns, modals, menus) positioned relative to a reference element or the viewport. It handles positioning strategies (FlexibleConnectedPositionStrategy), scrolling strategies, and backdrop management for Angular Material dialog/tooltip/select internals.
Q166. What is the purpose of the Angular CLI builders API?
Angular CLI Builders API allows creating custom build targets (ng run project:target) that integrate with angular.json's architect configuration. Custom builders wrap ESBuild, Webpack, or other tools for specialized build processes like component library builds, documentation generation, or custom asset processing.
Q167. What is the purpose of Angular update schematics?
Angular update schematics (ng update) automate migration from one Angular version to the next: updating API usages, refactoring deprecated patterns, updating package.json versions, and modifying configuration files. The @angular/core:migration collection handles Angular version upgrade automation.
Q168. What is the Angular performance budget?
Performance budgets in angular.json warn or error when bundle sizes exceed thresholds: maximumWarning/maximumError for initial, lazy, and component styles. The Angular build reports budget violations, preventing unnoticed bundle size regressions that degrade application loading performance.
Q169. What is the purpose of the withEnabledBlockingInitialNavigation() router option?
withEnabledBlockingInitialNavigation() in provideRouter() makes the router complete initial navigation before Angular bootstraps the application — required for SSR to ensure the correct component tree is rendered server-side based on the initial URL, preventing hydration mismatches.
Q170. What is the purpose of the PLATFORM_ID token in Angular?
PLATFORM_ID injection token provides the current rendering platform identifier: 'browser' or 'server'. isPlatformBrowser(platformId) and isPlatformServer(platformId) enable conditional code execution — guarding browser-only APIs (localStorage, window, document) from SSR execution context errors.
Q171. What is the purpose of afterRender and afterNextRender in Angular?
afterRender() (Angular 16+) registers a callback that runs after every render cycle completes. afterNextRender() runs only after the next render. Both execute outside Angular's zone. Used for DOM measurement and third-party library initialization that requires rendered DOM — replacing ngAfterViewInit for SSR-compatible code.
Q172. What is the purpose of input() signal in Angular 17+?
input() (Angular 17+) is a Signals-based @Input() replacement: const value = input<string>(); const required = input.required<number>(). input() returns a Signal, enabling computed() and effect() to depend on input values without ngOnChanges boilerplate. Works with the new Signals-based component model.
Q173. What is the purpose of output() in Angular 17+?
output() (Angular 17+) is a Signals-based @Output() replacement: const clicked = output<void>(); clicked.emit(). Unlike EventEmitter, output() doesn't extend RxJS Subject, is not subscribable externally, and is purely for parent event notification. Cleaner API with less RxJS coupling.
Q174. What is the purpose of model() signal in Angular?
model() (Angular 17+) creates a two-way bindable Signal combining input() and output(): const value = model(''); value.set('new') emits a valueChange event automatically, enabling [(value)]="parentProp" two-way binding syntax. Replaces the @Input() + @Output() valueChange pattern for two-way binding.
Q175. What is resource() API in Angular?
resource() (Angular 19+, experimental) provides a declarative async resource loading API: resource({ request: () => id(), loader: async ({ request, abortSignal }) => fetchData(request) }). Tracks loading, error, and resolved states as Signals, replacing manual Observable + loading state management for async data fetching.
Q176. What is rxResource() API in Angular?
rxResource() (Angular 19+) is the RxJS-based variant of resource(), accepting an Observable loader instead of async function: rxResource({ request: () => id(), loader: ({ request }) => http.get<Data>('/api/' + request) }). Bridges the RxJS HTTP world with Signals-based reactive resource management.
Q177. What is the purpose of the Angular ESLint configuration?
angular-eslint provides Angular-specific ESLint rules: @angular-eslint/component-selector, @angular-eslint/directive-selector, @angular-eslint/no-empty-lifecycle-method, @angular-eslint/use-lifecycle-interface. ESLint replaces TSLint (deprecated) for code style enforcement in Angular projects.
Q178. What is the purpose of the Prettier formatter in Angular?
Prettier enforces consistent code formatting (indentation, quotes, line length, semicolons) automatically. Integrated with Angular projects via .prettierrc config and ESLint (eslint-config-prettier disables formatting rules). Pre-commit hooks (husky + lint-staged) apply Prettier before commits for consistent codebase formatting.
Q179. What is the purpose of the Nx monorepo for Angular?
Nx is a smart build system and monorepo tool for Angular (and other frameworks). It provides affected build/test commands (only rebuild what changed), computation caching (local and remote), code generation plugins, dependency graph visualization, and module boundary enforcement for large-scale Angular development.
Q180. What is the purpose of the Angular DevKit?
Angular DevKit provides the foundational libraries for the Angular CLI: @angular-devkit/build-angular (builders), @angular-devkit/schematics (code generation framework), @angular-devkit/architect (task runner), and @angular-devkit/core (utility functions). DevKit enables extending and customizing Angular CLI behavior.
Q181. What is the purpose of CSP (Content Security Policy) in Angular?
Angular 16+ supports nonce-based CSP via the ngCspNonce attribute on the <app-root> element. Angular injects the nonce into dynamically created style tags, enabling strict CSP headers (script-src 'nonce-xxx') for XSS prevention in Angular SSR and CSP-compliant deployment environments.
Q182. What is the Angular router animation?
Route animations are defined using Angular's animation system with triggers bound to the router-outlet: animations: [trigger('routeAnimations', [transition('* <=> *', [...])])]. The @routerOutlet.activatedRouteData binding reads route data for animation state, enabling page transition animations on navigation.
Q183. What is the purpose of preconnect hints in Angular?
NgOptimizedImage generates <link rel="preconnect"> hints for configured image CDN domains, instructing the browser to establish connections to image servers early. This reduces latency for LCP image loading. The preconnect attribute on ngSrc images adds priority hints and preload links for critical images.
Q184. What is the purpose of the withInMemoryScrolling option?
withInMemoryScrolling({ scrollPositionRestoration: 'enabled' }) in provideRouter() restores the scroll position when navigating back in history. anchorScrolling: 'enabled' scrolls to anchor fragments (#section). Improves navigation UX for content-heavy applications where scroll state matters.
Q185. What is the Angular router title strategy?
TitleStrategy sets the browser tab title on navigation. DefaultTitleStrategy uses the route title property. Custom TitleStrategy implementations override updateTitle(snapshot) to build complex titles (app name + page name + breadcrumb) from route data hierarchy for consistent browser history labeling.
Q186. What is the purpose of the APP_BASE_HREF token?
APP_BASE_HREF configures the base URL for the Angular router and relative asset paths. Set via { provide: APP_BASE_HREF, useValue: '/my-app/' } for applications deployed at a non-root URL path. The RouterModule reads this token to construct absolute URLs for navigation and hyperlinks.
Q187. What is the purpose of withHashLocation() in Angular?
withHashLocation() in provideRouter() switches the URL strategy from HTML5 PushState (PathLocationStrategy — /path/to/page) to hash-based URLs (HashLocationStrategy — /#/path/to/page). Used for deploying Angular apps on servers that cannot configure HTML5 history API fallback routing.
Q188. What is the Angular testing defer utility?
TestBed provides TestBed.flushEffects() to synchronously flush Signal effects, and runScheduledEffects() for deferred effects testing. For @defer blocks, @angular/core/testing provides DeferBlockFixture to manually trigger defer loading states in component tests without real async delays.
Q189. What is the purpose of the Angular compatibility compiler (ngcc)?
ngcc (Angular Compatibility Compiler) compiled pre-Ivy Angular libraries (ViewEngine format) to Ivy format during postinstall. With Angular 16+, ngcc is deprecated as the npm ecosystem has fully transitioned to Ivy-compiled libraries. Modern Angular projects no longer require ngcc processing.
Q190. What is the purpose of the Angular package format (APF)?
Angular Package Format (APF) specifies the distribution format for Angular libraries on npm: FESM ES2022 (flat ESM bundles), ESM2022 (individual files), UMD (legacy), type definitions (.d.ts), and source maps. ng-packagr enforces APF compliance when building and publishing Angular libraries.
Q191. What is the purpose of the InjectionContext in Angular?
Injection context is the execution context where Angular's inject() function can be called: class constructors, factory functions, field initializers, and specific callbacks (runInInjectionContext()). Calling inject() outside injection context throws a runtime error. runInInjectionContext(injector, fn) manually establishes context.
Q192. What is the purpose of DestroyRef in Angular?
DestroyRef (Angular 16+) provides a programmatic way to register cleanup callbacks when a component/directive/service is destroyed: destroyRef.onDestroy(() => cleanup()). More composable than ngOnDestroy() as it can be injected into composable functions outside the component class.
Q193. What is the Angular Signals-based component model vision?
Angular's long-term Signals vision replaces Zone.js-based change detection with fine-grained, pull-based reactivity using Signals. Components with input()/model()/output() Signals, computed() derivations, and effect() side effects enable declarative, performant UIs without Zone.js patching or manual change detection management.
Q194. What is the purpose of linkedSignal() in Angular?
linkedSignal() (Angular 19+) creates a writable Signal derived from another Signal — like computed() but writable. It resets to its computed value when source changes, but can also be manually set(). Useful for form default values derived from parent state that users can also override.
Q195. What is the purpose of the authInterceptor pattern in Angular?
The auth interceptor intercepts all outgoing HTTP requests, clones the request to add Authorization header (Bearer token from AuthService), and passes the modified request to the next handler. On 401 responses, it can trigger token refresh flows and retry the failed request transparently.
Q196. What is the SSR with Express server setup in Angular?
Angular SSR with Express: @angular/ssr generates server.ts with an Express app, app.engine registered with Angular's CommonEngine, routes served by the Angular SSR renderer, and static assets served by Express middleware. The build generates both a browser bundle and a Node.js server bundle.
Q197. What is the purpose of the AbortSignal in Angular HTTP?
Angular 19+ resource() API uses AbortSignal in the loader function to cancel in-flight HTTP requests when the request Signal changes: fetch(url, { signal: abortSignal }) cancels the previous request on new emissions. This prevents race conditions and wasted network traffic in reactive data fetching.
Q198. What is the purpose of the @angular/platform-server?
@angular/platform-server provides the server-side rendering infrastructure for Angular Universal/SSR: ServerModule, renderApplication(), and CommonEngine that renders Angular components in a Node.js environment using a simulated DOM (domino), returning HTML strings for server responses.
Q199. What is the purpose of enableProfiling in Angular applications?
Angular DevTools profiling (enableProfiling() in development) records change detection cycles, component re-render counts, and time spent per component. The flame graph in DevTools visualizes which components trigger change detection and their render duration, identifying performance bottlenecks in complex Angular UIs.
Q200. What are career paths after mastering Angular?
Careers include Angular Developer, Senior Front-End Engineer, Full-Stack Developer (Angular + Node.js), Front-End Architect, UI/UX Engineer, Angular Consultant, Design Systems Engineer, Technical Lead, DevRel Engineer at framework teams, and Engineering Manager at companies using enterprise Angular applications.