Angular Interview Preparation

# CHAPTER 28

Angular Interview Preparation #

1. Chapter Introduction #

This chapter consolidates the most frequently asked Angular interview questions. Interviewers test both conceptual understanding (what is X?) and practical application (write X). Master these and you will approach any Angular technical interview with confidence.

---

Section A: Fundamentals (Junior Level) #

Q1. What is Angular? Angular is a Google-maintained, TypeScript-based open-source framework for building Single Page Applications (SPAs). It provides a complete solution with routing, forms, HTTP client, and DI built in.

Q2. What is the difference between AngularJS (Angular 1) and Angular? AngularJS used JavaScript, a scope-based digest cycle for change detection, and controllers. Modern Angular (2+) was completely rewritten using TypeScript, component-based architecture, and hierarchical dependency injection.

Q3. What is the role of @NgModule? @NgModule is a decorator that groups related Angular building blocks — declaring components, importing modules, providing services, and specifying the bootstrap component.

Q4. What is a Component in Angular? A Component is the fundamental building block of Angular UI. It consists of a TypeScript class (@Component), an HTML template, and encapsulated CSS.

Q5. What is the difference between declarations, imports, and exports in NgModule?

• declarations: Components/directives/pipes belonging to this module.

• imports: Other modules needed by this module.

• exports: What this module makes available to other modules.

Q6. What is the purpose of selector in @Component? The selector defines the custom HTML tag used to render the component. selector: 'app-hero' means you use <app-hero> in templates.

Q7. What is Data Binding in Angular? Data binding synchronizes data between the TypeScript class and the HTML template. The four types are: Interpolation {{ }}, Property Binding [ ], Event Binding ( ), and Two-Way Binding [( )].

Q8. What is ngOnInit and when is it called? ngOnInit is a lifecycle hook called once after the component's inputs have been set. It is the correct place for initialization logic and HTTP calls.

Q9. What is Dependency Injection in Angular? DI is a design pattern where Angular automatically provides required service instances to components/services that declare them in their constructor. providedIn: 'root' creates a Singleton.

Q10. What is *ngIf and how does it differ from [hidden]? *ngIf="false" completely removes the element from the DOM. [hidden]="true" hides it with CSS (display:none) but the element remains in memory.

---

Section B: Intermediate Level #

Q11. What are Route Guards and what types exist? Guards control route access. Types: CanActivate (block route entry), CanDeactivate (block leaving), CanLoad (block module loading), Resolve (prefetch data before route activates).

Q12. What is an HTTP Interceptor? An Interceptor is a service that intercepts outgoing HTTP requests and/or incoming responses globally. Most commonly used to add auth tokens and handle 401 errors.

Q13. Explain OnPush change detection. OnPush tells Angular to only re-render a component when its @Input reference changes or an async event fires, improving performance significantly compared to the Default strategy.

Q14. What is trackBy and why is it important? trackBy provides Angular a unique key for *ngFor items. Without it, Angular destroys and recreates all DOM elements on any array change. With trackBy, only changed elements re-render.

Q15. What is the async pipe? The async pipe subscribes to an Observable in the template, renders the value, and automatically unsubscribes when the component is destroyed, preventing memory leaks.

Q16. What is the difference between Subject, BehaviorSubject, and ReplaySubject?

• Subject: No initial value, late subscribers miss past events.

• BehaviorSubject: Has initial value, emits current value to late subscribers.

• ReplaySubject(n): Buffers and replays last N values to late subscribers.

Q17. Explain Lazy Loading. Lazy loading uses dynamic import() in route configuration to load feature modules only when their route is visited, drastically reducing the initial bundle size.

Q18. What is switchMap and when is it used? switchMap cancels the previous inner Observable and subscribes to the new one. Perfect for search-as-you-type, preventing stale results from old requests overwriting newer ones.

Q19. What is the difference between Template-Driven and Reactive Forms? Template-Driven forms are HTML-directive-based (simple, less testable). Reactive forms are TypeScript-based (complex, highly testable, better for dynamic forms).

Q20. What are Angular Standalone Components? Standalone Components (v15+) include their own imports in @Component and don't require NgModules, simplifying application architecture.

---

Section C: Advanced Level #

Q21. Explain Angular's Change Detection mechanism. Angular's default change detection checks all components on every browser event. OnPush limits checks to when @Input references change. Signals (v16+) introduce fine-grained reactivity.

Q22. What are Angular Signals? Signals are a reactive primitive introduced in Angular 16. signal() wraps a value, computed() derives values from signals, and Angular automatically tracks dependencies to update only what changed.

Q23. What is ViewEncapsulation? Controls how CSS is scoped. Emulated (default) adds unique attributes to simulate Shadow DOM. None makes styles global. ShadowDom uses native Shadow DOM.

Q24. What is the difference between @ViewChild and @ContentChild? @ViewChild accesses elements in the component's own template. @ContentChild accesses elements projected into the component via <ng-content>.

Q25. What is ng-content? ng-content is Angular's content projection — the equivalent of Vue's <slot>. It allows a parent to inject HTML content into a child component's template.

---

Section D: Coding Challenges #

Challenge 1: Write a custom truncate pipe that shortens text to 50 characters. Challenge 2: Create a canActivate functional guard that checks for an auth token. Challenge 3: Implement a live search using debounceTime and switchMap. Challenge 4: Write a CartService with BehaviorSubject managing an array of cart items. Challenge 5: Write a Jasmine test for a TaskService.addTask() method.

---

Section E: MCQs #

Interview Questions #

• Q: Describe a complex Angular application you built. What architectural decisions did you make and why?

• Q: How would you improve the performance of an Angular application that is rendering slowly?

Summary #

The 50 questions and coding challenges in this chapter cover the breadth of Angular knowledge tested in real technical interviews. Revisit the chapters covering your weak areas and practice the coding challenges until they feel natural.

Next Chapter Recommendation #

In Chapter 29: Advanced Angular Concepts, we explore Signals, standalone components at scale, dynamic component creation, and building custom Angular libraries.