Top 100 Angular Interview Questions & Answers - Textnotes

Top 100 Angular Interview Questions & Answers

This chapter contains the most frequently asked Angular interview questions and answers ranging from basic to advanced topics, including TypeScript, components, services, RxJS, forms, routing, performance, and best practices.

1. What is Angular?

Angular is a TypeScript-based front-end framework developed by Google to build single-page applications (SPA) with modular architecture.

2. What are key features of Angular?

  1. Component-based architecture
  2. Two-way data binding
  3. Dependency Injection
  4. Directives & Pipes
  5. Angular CLI
  6. RxJS Observables
  7. Modular structure

3. Difference between AngularJS and Angular

AngularJS is JavaScript-based (MVC), Angular is TypeScript-based (Component-based). Angular is faster, mobile-ready, and supports AOT compilation.

4. What is TypeScript?

TypeScript is a superset of JavaScript that adds static typing, interfaces, classes, and decorators. Angular is built with TypeScript.

5. What are Angular Components?

Components are building blocks controlling templates, styles, and logic. Example:


@Component({ selector: 'app-user', template: '<p>{{name}}</p>' })
export class UserComponent { name = 'Chinmaya'; }

6. What is a Module in Angular?

Modules (NgModule) group related components, services, and directives. Every app has a root module (AppModule).

7. What is Data Binding?

Synchronizes data between component and template.

  1. Interpolation: {{value}}
  2. Property Binding: [value]="name"
  3. Event Binding: (click)="doSomething()"
  4. Two-way Binding: [(ngModel)]="value"

8. Difference between Template-driven and Reactive Forms

Template-driven: uses templates, good for small apps

Reactive Forms: uses component, better for large apps, programmatic validation

9. What is Dependency Injection (DI)?

A design pattern where services are injected into components rather than instantiated manually.


constructor(private userService: UserService) {}

10. What is a Directive in Angular?

Directives manipulate DOM.

  1. Structural: *ngIf, *ngFor
  2. Attribute: ngClass, ngStyle

11. What is Angular CLI?

A command-line tool for creating, building, testing, and deploying Angular apps.

12. What is RxJS?

A library for reactive programming using Observables to handle asynchronous data streams.

13. What are Observables?

Observables represent streams of data over time. Components subscribe to receive updates.

14. Difference between Promise and Observable

Promise: eager, single value, not cancelable

Observable: lazy, multiple values, cancelable, operators available

15. What are Angular Services?

Reusable classes for business logic, API calls, or state. Provided via DI.

16. What is Routing in Angular?

Angular Router enables navigation between components/views.

17. What are Angular Guards?

Guards control route access: CanActivate, CanDeactivate, CanLoad.

18. What is Lazy Loading?

Load feature modules on demand to reduce initial bundle size.

19. What is Angular Pipe?

Transforms data in templates. Built-in: date, currency. Custom pipes can be created using @Pipe.

20. Difference between Pure and Impure Pipe

Pure: executes only when input changes

Impure: executes every change detection cycle

21. What is Angular Universal?

Enables server-side rendering (SSR) for SEO and faster initial load.

22. What is Change Detection in Angular?

Updates the DOM when component data changes. Strategies: Default and OnPush.

23. What is NgRx?

Redux-style state management: Actions → Reducers → Store → Selectors → Effects.

24. What is Angular Material?

A UI library implementing Material Design. Components: Buttons, Forms, Tables, Dialogs, Toolbar, Snackbar.

25. What is a Progressive Web App (PWA) in Angular?

A PWA enables offline functionality, push notifications, and installable apps (ng add @angular/pwa).

26. What is the difference between Angular Elements and Components?

Angular Elements wrap Angular components as custom HTML elements to be used outside Angular apps.

27. What is a Feature Module?

Modules dedicated to a specific domain or feature of the app, often lazy-loaded.

28. What is a Shared Module?

Contains common components, directives, and pipes used across multiple modules.

29. What is Core Module?

Contains singleton services and app-wide providers, loaded once in AppModule.

30. What are Observables and Subjects?

  1. Observable: data stream
  2. Subject: both Observable & Observer, can emit and subscribe

31. What is BehaviorSubject?

A type of Subject that stores the latest value and emits it immediately to new subscribers.

32. What is AsyncPipe?

Pipe to subscribe to Observables and automatically handle unsubscribe in templates.

33. What is Angular Renderer2?

Service to manipulate DOM safely across platforms.

34. What is the difference between ViewChild and ContentChild?

  1. ViewChild: access child components/templates inside component view
  2. ContentChild: access projected content inside component

35. What is Angular Lifecycle Hooks?

Hooks that trigger at different stages: ngOnInit, ngOnChanges, ngDoCheck, ngAfterViewInit, ngOnDestroy.

36. Difference between ngOnInit and constructor

Constructor: initializes the class

ngOnInit: executes after component initialization and input bindings

37. What is Renderer2 vs ElementRef?

  1. ElementRef: direct DOM access (unsafe)
  2. Renderer2: safe, platform-independent DOM manipulation

38. Difference between Observables and Promises

(covered in Q14)

39. What is the difference between forRoot() and forChild()?

  1. forRoot(): provides singleton services in root module
  2. forChild(): used in feature modules for routing

40. What is RouterLink vs href?

  1. RouterLink: SPA navigation without page reload
  2. href: reloads entire page

41. What is EventEmitter?

Class used to emit events from child to parent components.

42. Difference between BehaviorSubject, ReplaySubject, AsyncSubject

  1. BehaviorSubject: stores last value
  2. ReplaySubject: stores multiple values
  3. AsyncSubject: emits last value on complete

43. What is Angular Interceptor?

Intercepts HTTP requests/responses for logging, token handling, or error handling.

44. Difference between NgClass and NgStyle

  1. NgClass: add/remove CSS classes
  2. NgStyle: apply CSS styles dynamically

45. Difference between structural and attribute directives

Structural: modify DOM structure (*ngIf)

Attribute: modify DOM behavior or style (ngClass)

46. What is Angular Router outlet?

A placeholder for rendering routed components.

47. Difference between ActivatedRoute and Router

  1. ActivatedRoute: info about current route
  2. Router: navigate programmatically

48. What is Angular Zone.js?

Library for change detection by monkey-patching async operations.

49. What is the difference between OnPush and Default change detection?

OnPush checks only when inputs change, Default checks every event.

50. What is Angular Ahead-of-Time (AOT) Compilation?

Compiles TypeScript and templates before runtime for faster app loading.

51. What is Just-in-Time (JIT) Compilation?

Compiles templates in the browser at runtime (slower).

52. Difference between AOT and JIT

AOT: faster, smaller bundle, compile before runtime

JIT: slower, compile in browser, mainly for development

53. What is Angular Injector?

Manages dependency injection and provides services to components.

54. What is Angular FormsModule?

Provides template-driven forms functionalities like ngModel.

55. What is ReactiveFormsModule?

Provides reactive forms functionalities like FormGroup, FormControl.

56. Difference between FormControl, FormGroup, FormArray

  1. FormControl: single input
  2. FormGroup: group of FormControls
  3. FormArray: dynamic array of FormControls

57. What is a custom validator?

A function to validate form fields based on custom logic.

58. What is Angular HttpClient?

Service to perform HTTP requests. Supports GET, POST, PUT, DELETE.

59. What is HttpInterceptor?

Intercepts HTTP requests and responses for authentication, logging, caching.

60. How to handle errors in HttpClient?

Use catchError operator in RxJS:


this.http.get('/api').pipe(catchError(err => of([])));

61. Difference between subscribe() and async pipe

Subscribe(): manual subscription in component

AsyncPipe: automatic subscription and unsubscribe in template

62. What are Angular Animations?

Angular animations use @angular/animations module for UI transitions.

63. What is Angular Renderer2?

(covered in Q33)

64. What is Angular Service Worker?

Used for offline caching in PWAs.

65. Difference between SPA and MPA

SPA: Single-page, dynamic updates

MPA: Multiple pages, reloads on navigation

66. What is Angular i18n?

Supports multi-language apps using i18n attributes and translation files.

67. What is Angular Lazy Loading?

(covered in Q18)

68. What is Angular Universal?

(covered in Q21)

69. Difference between Angular Universal and SSR

Angular Universal is the framework supporting SSR for Angular.

70. What is Module Federation in Angular?

Enables micro-frontends where apps load modules from remote apps dynamically.

71. What is Dynamic Component Loader?

Load components at runtime using ViewContainerRef and ComponentFactoryResolver.

72. What is Angular PWA?

(covered in Q25)

73. How to implement service worker?

ng add @angular/pwa and configure caching in ngsw-config.json.

74. What is Angular Lazy Loading Preloading Strategy?

Preloads lazy modules in background: PreloadAllModules.

75. Difference between Angular Elements and Web Components

Angular Elements are Angular-wrapped web components, can be used outside Angular.

76. What is Ahead-of-Time Optimization?

(covered in Q50)

77. How to optimize Angular app performance?

  1. OnPush change detection
  2. Lazy loading modules
  3. trackBy in *ngFor
  4. Use AsyncPipe
  5. Optimize bundle size

78. How to implement caching in Angular?

Use HTTP Interceptors or localStorage/sessionStorage.

79. How to handle authentication in Angular?

  1. JWT tokens
  2. Store in localStorage/sessionStorage
  3. Use AuthGuard to protect routes

80. Difference between CanActivate and CanLoad Guards

CanActivate: protects route

CanLoad: protects lazy-loaded module

81. How to implement role-based access?

  1. Define roles in JWT token or user service
  2. Use Guard to restrict access

82. How to implement dynamic forms?

  1. Use FormArray
  2. Create controls dynamically in component

83. How to implement nested routes?

Use children property in route configuration.

84. Difference between RouterLinkActive and RouterLink

RouterLinkActive: applies class when route is active

RouterLink: navigation to route

85. How to communicate between components?

  1. Parent to child: @Input
  2. Child to parent: @Output + EventEmitter
  3. Service-based: shared service with Subject/BehaviorSubject

86. What is NgContent?

Directive to project content from parent to child component.

87. Difference between ViewEncapsulation

  1. Emulated: default, styles scoped
  2. None: global styles
  3. ShadowDom: native Shadow DOM

88. How to create custom directive?

Use @Directive decorator and implement behavior in HostListener and HostBinding.

89. Difference between Structural and Attribute Directives

(covered in Q45)

90. How to create custom pipe?

Use @Pipe decorator and implement transform method.

91. Difference between Pure and Impure Pipes

(covered in Q20)

92. How to integrate Angular with backend?

Use HttpClient service to call APIs.

93. How to handle Observables errors?

Use catchError or retry operators.

94. How to unsubscribe from Observables?

  1. Use unsubscribe()
  2. Use AsyncPipe
  3. Use takeUntil pattern

95. What is Angular Zone.js?

(covered in Q48)

96. How to implement SSR with Angular Universal?

ng add @nguniversal/express-engine and configure server.ts

97. How to deploy Angular app?

  1. Build: ng build --prod
  2. Deploy to Firebase, Netlify, Vercel, AWS S3, Azure, NGINX

98. How to implement micro-frontends?

Use Module Federation with Webpack 5.

99. How to secure Angular application?

  1. JWT auth
  2. Route guards
  3. XSS prevention using sanitization
  4. Avoid direct DOM manipulation

100. Best practices in Angular?

  1. Use Smart/Dumb component separation
  2. Lazy load feature modules
  3. Use OnPush strategy
  4. Use AsyncPipe for Observables
  5. Keep services singleton
  6. Use Shared/Core modules
  7. Write unit and E2E tests