Angular Interview Questions

Comprehensive Angular interview questions covering architecture, components, services, RxJS, and best practices:

Fundamentals

1. What is Angular and its key features?

Angular is a TypeScript-based framework for building web applications. Key features: Component-based architecture, dependency injection, RxJS integration, TypeScript support, comprehensive CLI, built-in routing, forms, and HTTP client.

2. What are the main building blocks of Angular?

• Modules (NgModule)

• Components

• Templates

• Services

• Directives

• Pipes

3. What is dependency injection in Angular?

DI is a design pattern where dependencies are provided to a class rather than created by it. Angular has a hierarchical injector system that provides dependencies at different levels (root, module, component).

4. What is the difference between @Component and @Directive?

@Component extends @Directive with a template. Components have their own view, while directives modify the behavior or appearance of existing elements.

5. What are lifecycle hooks in Angular?

Lifecycle hooks are methods called at specific times: ngOnInit, ngOnChanges, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy.

Components & Data Binding

6. What are the different types of data binding?

• Interpolation: {{ value }}

• Property binding: [property]="value"

• Event binding: (event)="handler()"

• Two-way binding: [(ngModel)]="value"

7. What is @Input() and @Output()?

@Input() receives data from parent. @Output() emits events to parent using EventEmitter.

8. What is ViewChild and ContentChild?

ViewChild accesses child components/elements in the component template. ContentChild accesses content projected into the component via ng-content.

Services & DI

9. What is providedIn: "root"?

Makes service available app-wide as a singleton. Angular creates one instance shared across the application. Alternative to providing in module.

10. What is the hierarchical injector?

Angular has a tree of injectors matching the component tree. Child injectors can override parent providers. Services can be provided at root, module, or component level.

RxJS & Observables

11. What is the difference between Promise and Observable?

• Observable: Lazy, cancellable, multiple values, operators

• Promise: Eager, not cancellable, single value

12. What is the difference between switchMap, mergeMap, and concatMap?

• switchMap: Cancels previous, switches to new

• mergeMap: Runs all in parallel

• concatMap: Queues sequentially

13. What is a Subject?

A Subject is both an Observable and Observer. It can multicast to multiple observers. Types: Subject, BehaviorSubject, ReplaySubject, AsyncSubject.

Routing

14. What are route guards?

Guards control navigation: CanActivate (access route), CanActivateChild (child routes), CanDeactivate (leave route), CanLoad (lazy load), Resolve (pre-fetch data).

15. What is lazy loading?

Lazy loading loads modules on-demand rather than at app start. Uses loadChildren in routes to load modules when navigating to them.

Advanced

16. What are standalone components?

Standalone components (Angular 14+) don't need NgModules. They import dependencies directly, simplifying Angular architecture.

17. What are Signals?

Signals (Angular 16+) are reactive primitives for fine-grained reactivity. They provide better performance than Zone.js and simpler state management.

18. What is Change Detection?

Change detection checks if data changed and updates the view. Strategies: Default (check entire tree) and OnPush (check only when inputs change or events occur).

19. What is NgRx?

NgRx is a Redux-inspired state management library. Uses Actions, Reducers, Effects, and Selectors for predictable state management.

20. What are pipes?

Pipes transform data in templates. Built-in: date, currency, uppercase, async. Custom pipes implement PipeTransform interface. Pure pipes (default) only re-run when input reference changes.

Forms & Validation

21. What is the difference between template-driven and reactive forms?

• Template-driven: Uses directives, simpler, good for basic forms

• Reactive: Model-driven, better for complex forms, easier to test, more control

22. What is FormArray?

FormArray manages an array of FormControl, FormGroup, or FormArray instances. Useful for dynamic forms where the number of controls is not known in advance.

23. How do you create custom validators?

Implement ValidatorFn for sync validators or AsyncValidatorFn for async validators. Return ValidationErrors object or null.

Performance & Optimization

24. When should you use OnPush change detection?

Use OnPush for components that only depend on inputs and don't have internal state changes. It significantly improves performance by reducing change detection cycles.

25. What is trackBy and why is it important?

trackBy is a function used with *ngFor to help Angular identify which items changed, added, or removed. It prevents unnecessary DOM recreations by tracking items by unique identifier.

26. What is NgZone and when to use runOutsideAngular?

NgZone wraps async operations and notifies Angular when to run change detection. Use runOutsideAngular() for high-frequency events or heavy computations that don't need to update the UI immediately.

Practical Scenarios

27. How do you prevent memory leaks?

Unsubscribe from observables in ngOnDestroy, use async pipe (auto unsubscribes), use takeUntil operator, or use SubSink/Subscription.add() for multiple subscriptions.

28. How do you share data between components?

• Parent-Child: @Input() and @Output()

• Sibling: Shared service with Subject/BehaviorSubject

• Any: State management (NgRx, Signals)

29. What is AOT compilation?

Ahead-of-Time compilation compiles Angular templates during the build process (vs Just-in-Time at runtime). Benefits: Faster rendering, smaller bundle size, early error detection, better security.

30. How do you optimize bundle size?

• Use production build with AOT

• Lazy load feature modules

• Use tree-shakeable providers (providedIn)

• Remove unused code and dependencies

• Use standalone components