Angular Interview Questions
Comprehensive Angular interview questions covering components, directives, services, RxJS, routing, forms, and modern Angular features.
Angular (2+) is a complete rewrite of AngularJS, built with TypeScript. It uses a component-based architecture, a hierarchical dependency injection system, and a reactive programming model via RxJS. AngularJS used two-way data binding with scopes and controllers.
A component is the basic building block of an Angular application. It consists of a TypeScript class decorated with @Component, an HTML template, and optional CSS styles. Each component controls a portion of the UI.
A module (NgModule) is a container that groups related components, directives, pipes, and services. A component controls a view (UI). In Angular 14+, standalone components can exist without NgModules.
Directives are classes that add behaviour to DOM elements. There are three types: Component directives (with templates), Structural directives (e.g., *ngIf, *ngFor that change DOM structure), and Attribute directives (e.g., ngClass, ngStyle that change appearance or behaviour).
Angular supports four forms of data binding: Interpolation ({{ }}), Property binding ([property]="value"), Event binding ((event)="handler()"), and Two-way binding ([(ngModel)]="value") which combines property and event binding.
Dependency Injection (DI) is a design pattern where Angular's injector provides services or other dependencies to components and services. Services are registered as providers and injected via constructors.
A service is a class decorated with @Injectable that contains business logic, data access, or shared functionality. Services are singleton by default when provided in root, and are shared across components.
RxJS is a reactive programming library using Observables. Angular uses it for HTTP requests, event handling, and async operations. Key operators include map, filter, switchMap, mergeMap, debounceTime, and catchError.
A Promise handles a single async value and is not cancellable. An Observable is a stream of values over time, lazy, cancellable, and supports multiple operators for transformation. Observables are used throughout Angular's HTTP client and forms.
Angular Router enables navigation between views. Routes are defined in a RouterModule configuration mapping URL paths to components. It supports lazy loading, route guards, child routes, and route parameters.
Route guards are interfaces (CanActivate, CanDeactivate, CanLoad, Resolve) that control navigation. For example, CanActivate checks if a user is authenticated before allowing access to a route.
Lazy loading defers loading of feature modules until they are needed, reducing initial bundle size and improving application startup time. It is configured using loadChildren in route definitions.
Template-driven forms rely on directives in the template (ngModel) and are simpler for basic use. Reactive forms are defined programmatically using FormControl, FormGroup, and FormArray, giving better control, testability, and handling of complex scenarios.
Angular uses Zone.js to intercept async events and trigger change detection. The default strategy checks all components. OnPush strategy only checks when input references change or events are emitted, improving performance.
Lifecycle hooks are methods called at specific points in a component's life: ngOnInit (after first data binding), ngOnChanges (on input changes), ngOnDestroy (before destruction), ngAfterViewInit (after view initialised), and others.
@Input allows a parent component to pass data down to a child component. @Output with EventEmitter allows a child component to emit events up to its parent, enabling parent-child communication.
A pipe transforms displayed values in templates. Built-in pipes include DatePipe, CurrencyPipe, UpperCasePipe, and AsyncPipe. Custom pipes are created with the @Pipe decorator and implement PipeTransform.
The async pipe subscribes to an Observable or Promise in the template and automatically unsubscribes when the component is destroyed, preventing memory leaks and simplifying async data display.
@ViewChild is a decorator that gives a component access to a child component, directive, or DOM element from the template, allowing programmatic interaction with child elements.
Introduced in Angular 14, standalone components use standalone: true in @Component and can import their own dependencies directly without an NgModule, simplifying the application structure.
NgRx is a state management library for Angular inspired by Redux. It uses actions, reducers, selectors, and effects to manage application state in a predictable way. Use it for complex applications with shared state across many components.
switchMap cancels the previous inner observable when a new one arrives (best for search). mergeMap runs all inner observables concurrently. concatMap queues inner observables and runs them sequentially.
Use the catchError operator in a pipe after the HTTP call to intercept errors. You can log the error, display a user-friendly message, or return a fallback Observable. HTTP interceptors can also handle errors globally.
An HTTP interceptor intercepts outgoing HTTP requests and incoming responses. It is used to add authentication headers, log requests, handle errors globally, or show loading indicators.
Ahead-of-Time (AOT) compilation converts Angular HTML and TypeScript into efficient JavaScript before the browser downloads and runs the code. This results in faster rendering, smaller bundle sizes, and earlier template error detection.
Want structured Angular training? See our training programmes.