Angular interview questions

What a strong answer covers

• List hooks in order: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy.
• Describe ngOnChanges: called when input bindings change, receives SimpleChanges object; useful for reacting to input changes.
• Describe ngOnInit: called once after first ngOnChanges; used for initialization logic like fetching data.
• Describe ngDoCheck: called during every change detection run; use for custom change detection (but avoid heavy logic).
• Describe ngOnDestroy: cleanup before component destruction; unsubscribe from observables, detach event handlers.

Where people lose the point

• ×Confusing the order of ngAfterContentInit and ngAfterViewInit.
• ×Performing heavy operations in ngDoCheck, causing performance issues.
• ×Forgetting to unsubscribe in ngOnDestroy, leading to memory leaks.

What a strong answer covers

• DI is a design pattern where dependencies are provided to classes rather than created internally; Angular's DI uses a tree of injectors.
• Providers are configured in @Component, @Directive, @NgModule, or root injector; they map a token (class, string, InjectionToken) to a value or factory.
• Injectors are hierarchical: each component has its own injector that can override providers from parent injectors.
• Angular resolves dependencies by walking up the injector tree until it finds a provider; if none found, throws error.
• Use @Injectable({providedIn: 'root'}) for singleton services; component-level providers create new instances per component.

Where people lose the point

• ×Assuming all services are singletons; forgetting that component providers create new instances.
• ×Using string tokens without InjectionToken, risking collisions.
• ×Not understanding that lazy-loaded modules create their own injector, potentially causing multiple service instances.

What a strong answer covers

• Change detection checks component templates for changes after any async event (click, XHR, setTimeout). Angular uses Zone.js to intercept async operations and trigger change detection.
• Default strategy: checks every component in the tree from root to leaves, comparing current and previous values (reference comparison for objects).
• OnPush strategy: only checks a component when its input references change (immutable data), or when an event originates from the component or its children, or when an observable emits via async pipe.
• OnPush improves performance by reducing checks; requires immutable data patterns or explicit markForCheck() calls.
• Use ChangeDetectorRef.detectChanges() for manual control in edge cases.

Where people lose the point

• ×Mutating objects directly when using OnPush; changes won't be detected.
• ×Forgetting to use async pipe with OnPush; manual subscriptions require markForCheck().
• ×Assuming OnPush makes the entire subtree skip checks; child components with Default are still checked.

What a strong answer covers

• CanActivate: prevents route activation; used for authentication checks (e.g., redirect to login if not authenticated).
• CanActivateChild: similar but applies to child routes; useful for protecting a section of routes.
• CanDeactivate: prevents leaving a route; used for unsaved changes confirmation dialogs.
• Resolve: prefetches data before route activation; ensures data is available before component loads.
• CanLoad: prevents lazy-loaded module from loading; used for feature access control (e.g., premium features).

Where people lose the point

• ×Using CanActivate for data fetching instead of Resolve; CanActivate is for boolean decisions only.
• ×Not returning an Observable or Promise from guards; guards must return boolean, UrlTree, or Observable/Promise of those.
• ×Forgetting that CanLoad only runs once; if the module is already loaded, it won't run again.

What a strong answer covers

• Template-driven forms: defined in template with directives like ngModel; asynchronous, less code for simple forms; rely on two-way data binding.
• Reactive forms: defined programmatically with FormGroup, FormControl; synchronous, more explicit, easier to test and validate.
• Reactive forms offer better scalability for complex forms with dynamic fields, custom validators, and cross-field validation.
• Template-driven forms are simpler for basic forms with minimal validation; reactive forms are preferred for enterprise applications.
• Both use the same underlying validation API; reactive forms give more control over form state and value changes.

Where people lose the point

• ×Mixing both approaches in the same form; they are not designed to work together.
• ×Using reactive forms without importing ReactiveFormsModule.
• ×Not handling form submission properly; reactive forms require explicit subscription to valueChanges or using submit event.

What a strong answer covers

• Angular uses RxJS Observables for async operations like HTTP requests, event handling, and state management.
• map: transforms emitted values (e.g., extract data from HTTP response).
• filter: emits values that pass a predicate; useful for filtering streams.
• switchMap: maps each value to an inner observable, cancels previous inner observable; ideal for search-as-you-type to avoid stale requests.
• combineLatest: emits latest values from multiple observables when any emits; useful for combining multiple data sources.

Where people lose the point

• ×Using subscribe inside subscribe (nested subscriptions); should use higher-order mapping operators like switchMap.
• ×Forgetting to unsubscribe; can cause memory leaks. Use async pipe or takeUntil pattern.
• ×Misunderstanding switchMap vs mergeMap: switchMap cancels previous, mergeMap runs all concurrently.

What a strong answer covers

• Standalone components are self-contained: they declare their own dependencies (imports) directly, without needing an NgModule.
• Introduced in Angular 14, stable in 15+; they simplify application structure by reducing boilerplate.
• Standalone components can be bootstrapped directly in main.ts using bootstrapApplication.
• They can still be used within NgModule-based apps; NgModules can import standalone components and vice versa.
• Standalone components encourage lazy loading and tree-shaking; they are the recommended approach for new Angular applications.

Where people lose the point

• ×Assuming standalone components cannot use pipes or directives; they can import them directly.
• ×Forgetting to add standalone: true in the component decorator.
• ×Trying to declare a standalone component in an NgModule's declarations; they should be imported instead.

What a strong answer covers

• Content projection (transclusion) allows passing HTML content from a parent component into a child component's template using <ng-content>.
• Single-slot projection: one <ng-content> without select attribute; projects all content into that slot.
• Multi-slot projection: multiple <ng-content> elements with select attribute using CSS selectors (e.g., select='[header]') to project specific content into specific slots.
• Content projection is useful for creating reusable components like cards, modals, or layout components.
• Projected content retains its context (data binding, events) from the parent component, not the child.

Where people lose the point

• ×Assuming projected content is compiled in the child's context; it's compiled in the parent's context.
• ×Using select with element selectors that conflict with Angular components; prefer attribute selectors.
• ×Forgetting that <ng-content> does not create a wrapper element; styling may require additional elements.

What a strong answer covers

• HTTP interceptors are classes that implement HttpInterceptor; they can inspect and transform HTTP requests and responses globally.
• Interceptors are used for adding authentication tokens, logging, error handling, caching, or modifying headers.
• They are provided via HTTP_INTERCEPTORS multi-provider token; order matters as they form a chain.
• Example: AuthInterceptor adds Authorization header from a token service; ErrorInterceptor catches HTTP errors and displays notifications.
• Interceptors can also handle retry logic, request timing, or convert responses.

Where people lose the point

• ×Not calling next.handle(req) in the intercept method; the request will hang.
• ×Modifying the original request object; should clone it using req.clone().
• ×Forgetting to provide the interceptor in the module or app config.

What a strong answer covers

• Lazy loading loads feature modules on demand rather than at initial load; reduces initial bundle size and improves startup time.
• Implemented using loadChildren in route configuration: { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }.
• Angular CLI automatically code-splits lazy-loaded modules into separate chunks during build.
• Lazy loading works with both NgModules and standalone components (using loadComponent).
• Benefits: faster initial load, better performance for large apps; but adds network latency when navigating to lazy routes.

Where people lose the point

• ×Using loadChildren with a string path (deprecated); must use dynamic import function.
• ×Forgetting to export the module as default or named export in the import statement.
• ×Assuming lazy-loaded modules share the same injector as root; they create a child injector, which can cause multiple service instances if not providedIn root.

What a strong answer covers

• Signals are a new reactive primitive introduced in Angular 16+; they hold a value and notify consumers when the value changes.
• Signals are synchronous and simpler than Observables; they don't require subscriptions or operators.
• Computed signals derive values from other signals and are lazily evaluated and memoized.
• Signals integrate with Angular's change detection: when a signal changes, only the components that depend on it are checked (fine-grained reactivity).
• RxJS is better for complex async streams (e.g., debounce, combineLatest); signals are ideal for simple state and synchronous reactivity.

Where people lose the point

• ×Using signals for everything; Observables are still needed for async operations like HTTP.
• ×Mutating signal values directly; must use set() or update() methods.
• ×Not understanding that signals are not part of the RxJS ecosystem; they are a separate reactive system.

What a strong answer covers

• Create a class decorated with @Directive, specifying a selector (e.g., '[appHighlight]').
• Inject ElementRef and Renderer2 to safely manipulate the DOM.
• Use @HostListener to listen to events (mouseenter, mouseleave) and change the element's style.
• Use @Input to make the directive configurable (e.g., highlightColor).
• Register the directive in the module's declarations or as standalone.

Where people lose the point

• ×Directly manipulating the DOM via ElementRef.nativeElement without Renderer2; breaks server-side rendering and web workers.
• ×Forgetting to import the directive in the module or component using it.
• ×Using @HostBinding instead of Renderer2 for style changes; @HostBinding is simpler but less flexible.

What a strong answer covers

• Zone.js is a library that monkey-patches browser APIs (setTimeout, addEventListener, XHR) to intercept async operations.
• Angular uses Zone.js to know when to trigger change detection: after any patched async operation completes.
• When an async operation finishes, Zone.js notifies Angular, which then runs change detection on the component tree.
• In some cases (e.g., third-party libraries not patched), you may need to manually trigger change detection using NgZone.run() or ChangeDetectorRef.
• Angular 18+ introduces zoneless change detection as an optional feature, reducing dependency on Zone.js.

Where people lose the point

• ×Assuming Zone.js is part of Angular core; it's a separate dependency.
• ×Not using NgZone.run() when working with non-patched APIs; changes may not be detected.
• ×Thinking Zone.js is required; Angular now supports zoneless apps.

What a strong answer covers

• Import HttpClientTestingModule in TestBed configuration to mock HTTP requests.
• Inject HttpTestingController to control and flush mock responses.
• In the test, call the component method that triggers HTTP request, then use httpTestingController.expectOne() to assert the request URL and method.
• Use flush() to provide mock response data, then assert component state changes.
• After each test, call httpTestingController.verify() to ensure no outstanding requests.

Where people lose the point

• ×Using HttpClientModule in tests instead of HttpClientTestingModule; makes real HTTP calls.
• ×Forgetting to call verify() after each test; can cause false positives.
• ×Not handling multiple requests; expectOne() fails if more than one request matches.

What a strong answer covers

• ng-template defines a template block that is not rendered by default; it can be referenced by a template reference variable.
• ngTemplateOutlet is a structural directive that renders an ng-template in a specific location, optionally passing a context object.
• Useful for creating reusable components where the parent can customize the rendering (e.g., list item templates).
• Context object allows passing data from the host component to the template using let variables.
• Example: a generic list component that accepts an ng-template for each item, allowing custom layout.

Where people lose the point

• ×Confusing ng-template with ng-container; ng-container is for grouping without extra DOM element.
• ×Forgetting to pass context when using ngTemplateOutlet; the template cannot access host data without it.
• ×Using ng-template without a structural directive; it won't render unless used with *ngTemplateOutlet or *ngIf.

What a strong answer covers

• Ivy is Angular's next-generation compilation and rendering pipeline, default since Angular 9.
• It uses incremental compilation: only recompiles changed files, reducing build times.
• Ivy generates smaller bundle sizes by tree-shaking unused components, directives, and pipes more effectively.
• It enables features like ngtsc type checking, improved debugging with ngDevMode, and better runtime performance.
• Ivy also supports locality: each component is compiled independently, enabling lazy loading of individual components.

Where people lose the point

• ×Assuming Ivy is optional; it's the default and only engine since Angular 13.
• ×Thinking Ivy changes the API; it's backward compatible with View Engine.
• ×Not understanding that Ivy's tree-shaking requires components to be declared in modules or standalone imports.

What a strong answer covers

• RouteReuseStrategy determines if a route's component should be reused (detached and reattached) rather than destroyed and recreated.
• Default strategy destroys component on navigation away; custom strategy can cache components for faster back navigation.
• Use cases: tab-based interfaces where switching tabs should preserve state, or master-detail views where returning to list should keep scroll position.
• Implement shouldDetach, store, shouldAttach, retrieve, and shouldReuseRoute methods.
• Must be careful with memory management: detach and store component instances, and clean up when no longer needed.

Where people lose the point

• ×Not cleaning up stored components, causing memory leaks.
• ×Implementing shouldReuseRoute incorrectly; it determines if two routes are the same for reuse purposes.
• ×Forgetting that reused components do not re-run ngOnInit; state must be managed via other means.

What a strong answer covers

• Store: single source of truth for application state, an RxJS observable.
• Actions: dispatched events describing state changes (type and optional payload).
• Reducers: pure functions that take current state and action, return new state; must be immutable.
• Effects: handle side effects (e.g., HTTP calls) by listening to actions, performing async work, and dispatching new actions.
• Selectors: pure functions that derive slices of state; can be composed and are memoized for performance.

Where people lose the point

• ×Mutating state in reducers; must return new objects.
• ×Putting side effects in reducers; effects should handle async operations.
• ×Not using selectors for derived data; accessing raw state directly leads to coupling.