Angular
Components, services, RxJS, routing, forms, signals, testing & performance
Prepare for Angular interviews with 100+ topics covering components, dependency injection, RxJS, routing, forms, signals, state management, testing, and performance optimization for Angular 17+.
Components15 topics
Component Architecture Fundamentals
Understand what an Angular component is and why the framework is built around them.
Component Lifecycle Hooks
Know the sequence of lifecycle hooks Angular calls and what each one is meant for.
ngOnChanges Deep Dive
Understand exactly when ngOnChanges fires, what SimpleChanges contains, and its limitations.
Standalone Components
Explain how standalone components remove the need for NgModules and how they became the default in modern Angular.
Content Projection with ng-content
Explain how ng-content lets a parent inject markup into a child component's template.
Multi-slot Content Projection
Explain how the select attribute on ng-content enables multiple named projection slots in one component.
View Encapsulation Strategies
Explain Angular's three view encapsulation modes and how they affect CSS scoping.
Input and Output Properties
Explain how @Input and @Output enable one-directional parent-child data flow and event communication.
Template Reference Variables
Explain how template reference variables let you access DOM elements or component instances directly from a template.
ViewChild and ViewChildren
Explain how @ViewChild and @ViewChildren give a component class imperative access to elements and child components in its own template.
ContentChild and ContentChildren
Explain how @ContentChild and @ContentChildren access projected content rather than a component's own template.
Host Elements and Host Metadata
Explain what the host element is and how a component can bind properties, attributes, classes, and listeners onto it.
Component Styling Strategies
Compare the different ways to apply CSS to an Angular component and when to reach for each.
Smart and Presentational Components
Explain the smart/container vs presentational/dumb component pattern and why it improves testability and reuse.
Dynamic Component Rendering with NgComponentOutlet
Explain how NgComponentOutlet renders a component type chosen at runtime, and when it's preferable to structural conditionals.
Directives10 topics
New Control Flow with the @if Block
Explain the @if built-in control flow syntax introduced in Angular 17 and why it replaced *ngIf as the default.
New Control Flow with the @for Block
Explain the @for block, its mandatory track expression, and how it improves on *ngFor's trackBy.
New Control Flow with the @switch Block
Explain the @switch block as the built-in replacement for ngSwitch and its comparison semantics.
Legacy Structural Directives: *ngIf and *ngFor
Explain how the asterisk structural directive syntax desugars into ng-template, since interviewers still expect familiarity with legacy codebases.
Attribute Directives
Explain what an attribute directive is and how it differs from a structural directive and a component.
Custom Structural Directive Creation
Explain how to build a custom structural directive using TemplateRef and ViewContainerRef.
Host Binding and Host Listener
Explain @HostBinding and @HostListener as decorator-based tools for binding to and listening on a directive's host element.
Directive Composition API
Explain how the Directive Composition API lets a component apply another directive's behavior to itself without the consumer adding it manually.
Directive Communication with exportAs
Explain how exportAs lets a template reference variable expose a directive's instance instead of the native element.
Two-way Data Binding with ngModel
Explain how [(ngModel)] combines property and event binding into Angular's banana-in-a-box two-way binding syntax.
Services12 topics
Dependency Injection Fundamentals
Explain what dependency injection solves and how Angular's injector resolves a class's constructor dependencies.
Hierarchical Injectors
Explain how Angular's injector tree mirrors the component tree and how that affects instance sharing and overriding.
providedIn Strategies
Compare providedIn: 'root', 'platform', 'any', and explicit module/component providers.
Injection Tokens
Explain why InjectionToken exists and how it enables injecting non-class values like config objects or primitives.
Class-based HTTP Interceptors
Explain the classic HttpInterceptor interface for intercepting and transforming outgoing requests and incoming responses.
Functional HTTP Interceptors
Explain the modern functional HttpInterceptorFn API and how it differs from class-based interceptors.
Singleton Services
Explain what makes a service a singleton in Angular and why that matters for shared state across components.
Factory Providers
Explain useFactory providers and when constructing a dependency requires logic beyond a simple class instantiation.
Multi-providers
Explain the multi: true provider flag and how it lets multiple providers contribute to a single token.
The inject() Function
Explain how the inject() function provides an alternative to constructor injection and where it's required rather than optional.
Resolution Modifiers
Explain @Optional, @Self, @SkipSelf, and @Host and how they change how the injector tree is searched.
Service Composition Patterns
Explain how to compose smaller, focused services together rather than building large, monolithic services.
Routing10 topics
Router Configuration Fundamentals
Explain how Angular's Router maps URL paths to components via a route configuration array.
Functional Route Guards
Explain CanActivate and related guards as functions, and how they control whether navigation is allowed to proceed.
Route Resolvers
Explain how resolvers pre-fetch data before route activation so a component never renders in a data-less state.
Lazy Loading with loadComponent and loadChildren
Explain how lazy loading defers a feature's code until its route is visited, reducing initial bundle size.
Router Preloading Strategies
Explain how preloading strategies fetch lazy-loaded chunks in the background after initial load, and the built-in options available.
Route Parameters and Query Parameters
Distinguish route (path) parameters from query parameters and explain how to read each reactively.
Child Routes
Explain how nested route configurations render child views inside a parent component's own router-outlet.
Auxiliary Routes
Explain named/auxiliary router outlets and how they let multiple independent views be active at once.
Router Events
Explain the Router's event stream and how to use it for loading indicators, analytics, and scroll restoration.
Guarding Unsaved Changes
Explain how a CanDeactivate guard prompts a user before navigating away from a form with unsaved changes.
Forms10 topics
Template-driven Forms
Explain how template-driven forms build the form model implicitly from directives in the template using FormsModule.
Reactive Forms Fundamentals
Explain how reactive forms build an explicit FormGroup/FormControl model in the component class.
Custom Validators
Explain how to write a synchronous custom validator function matching Angular's ValidatorFn signature.
Async Validators
Explain how async validators handle validation rules that require a server round-trip, like checking username uniqueness.
FormArray for Dynamic Lists
Explain how FormArray manages a dynamic, variable-length collection of form controls.
Dynamic Form Generation
Explain how to build a form's structure programmatically from a schema/configuration object rather than hand-coding it.
Form State Tracking (dirty, touched, pristine)
Explain the meaning of pristine/dirty and untouched/touched control states and how they drive UX decisions.
Cross-field Validation
Explain how to validate relationships between multiple sibling controls, like matching password confirmation fields.
Typed Reactive Forms
Explain how Angular 14+ typed reactive forms provide compile-time type safety for form values that untyped forms lacked.
ControlValueAccessor for Custom Form Controls
Explain how ControlValueAccessor lets a custom component integrate seamlessly with ngModel and reactive forms directives.
RxJS12 topics
Observable Fundamentals
Explain what an Observable is, how it differs from a Promise, and the producer/consumer/subscription model.
The map and filter Operators
Explain how map and filter transform and select emitted values without mutating the source Observable.
Flattening Operators Compared: switchMap, mergeMap, concatMap, exhaustMap
Explain the distinct cancellation/concurrency semantics of the four main flattening operators and when to reach for each.
Subjects Explained
Explain what a Subject is, how it's both an Observable and an Observer, and why that makes it a multicasting primitive.
BehaviorSubject and ReplaySubject
Explain how BehaviorSubject and ReplaySubject each solve the 'late subscriber' gap that plain Subjects leave open.
Error Handling with catchError
Explain how catchError intercepts an Observable's error and how to recover, rethrow, or substitute a fallback stream.
Retry Strategies
Explain retry and retryWhen (or the modern retry with config) for automatically re-attempting a failed Observable.
Multicasting with share
Explain why a cold Observable re-executes its producer per subscriber, and how share/shareReplay makes it multicast instead.
combineLatest and forkJoin
Explain how combineLatest and forkJoin each combine multiple Observables, and when to use one over the other.
The zip Operator
Explain how zip pairs emissions by matching index/arrival order across multiple Observables rather than by latest value.
Unsubscribing Strategies with takeUntil
Explain the takeUntil + Subject pattern for reliably unsubscribing from multiple Observables tied to a component's lifecycle.
The Async Pipe
Explain how the async pipe subscribes to an Observable/Promise in the template and automatically unsubscribes on destroy.
State10 topics
Angular Signals Fundamentals
Explain what a Signal is, how it differs from a plain variable or an Observable, and why Angular introduced them.
Computed Signals
Explain how computed() derives a memoized, automatically-updating value from other signals.
Effects in Angular
Explain effect() as the mechanism for running side effects in response to signal changes.
Signal-based Inputs and Outputs
Explain the input()/output() functions as the signal-based alternative to @Input()/@Output() decorators.
NgRx Store Fundamentals
Explain the core NgRx concepts (store, actions, reducers) and the unidirectional data flow they enforce.
NgRx Actions and Reducers
Go deeper into action design conventions and reducer composition patterns in a real NgRx application.
NgRx Selectors
Explain createSelector's memoization and composition benefits over reading state directly from the store.
NgRx Component Store
Explain Component Store as a lighter-weight, locally-scoped alternative to the global NgRx Store.
RxJS State vs Signal State
Compare BehaviorSubject-based services and Signal-based services as two viable lightweight state management approaches.
toSignal and toObservable Interop
Explain how toSignal and toObservable bridge between the RxJS and Signal reactivity models.
Testing8 topics
TestBed Fundamentals
Explain what TestBed does and how it creates an isolated Angular testing module for each test.
Component Testing with Fixtures
Explain how ComponentFixture and DebugElement are used to query the rendered DOM and simulate user interaction in tests.
Service Testing and Mocking Dependencies
Explain how to unit test a service in isolation by substituting mock implementations for its dependencies.
Testing HTTP with HttpClientTestingModule
Explain how HttpClientTestingModule and HttpTestingController let you assert on and mock outgoing HTTP requests.
Testing Components with Signals
Explain how testing signal-based component state differs (or doesn't) from testing traditional property-based state.
End-to-End Testing Overview
Explain how end-to-end testing with tools like Cypress or Playwright differs from unit/component testing and what it's meant to catch.
Testing Asynchronous Code with fakeAsync
Explain fakeAsync and tick() as tools for deterministically testing code involving timers, promises, or debounced observables.
Spy and Mock Strategies
Compare spies, stubs, and fakes as test double strategies and when each is the right level of fidelity.
Performance8 topics
Change Detection Strategy Fundamentals
Explain the difference between Default and OnPush change detection strategies and why OnPush is a key performance lever.
trackBy for List Rendering
Explain how trackBy (and @for's mandatory track) prevents unnecessary DOM node recreation when rendering lists.
Lazy Loading for Bundle Size
Explain lazy loading specifically as a bundle-size and initial-load-performance technique, distinct from its routing mechanics.
Bundle Size Optimization Techniques
Explain concrete techniques (tree-shaking, standalone APIs, differential loading history, dependency auditing) for reducing bundle size beyond lazy loading.
Pure Pipes for Performance
Explain how pure (the default) pipes avoid unnecessary recomputation compared to impure pipes.
Zone.js and Zoneless Change Detection
Explain what Zone.js does, why Angular has relied on it, and what zoneless change detection changes.
The @defer Block
Explain how @defer lazily loads and renders a section of a template based on triggers like viewport visibility or interaction.
Memoization with Computed Signals
Explain how computed() signals provide automatic memoization as a performance technique distinct from manual caching.
Advanced5 topics
Dynamic Component Creation
Explain how to imperatively create a component instance at runtime using ViewContainerRef.createComponent.
Angular Custom Elements
Explain how @angular/elements packages an Angular component as a native, framework-agnostic Web Component.
Server-side Rendering with Hydration
Explain how Angular SSR (Universal) renders on the server and how hydration reuses that DOM instead of re-rendering client-side.
Internationalization in Angular
Explain Angular's built-in i18n approach (marking text, locale data, build-time translation) and how it compares to runtime i18n libraries.
Angular Animations
Explain Angular's animation DSL (triggers, states, transitions) and how it integrates with the Web Animations API.