Angular Advanced Interview Questions & Answers (2026)

This tutorial is made for experienced developers with at least 2+ years of experience. In this tutorial, we focused on Architecture, performance, change Detection, RXJS, Signal, etc.

Q 1: What is Change Detection in Angular, and how does it work internally?

Ans: Change Detection is the process of checking if the component data has changed, and then the UI updates automatically.

How does it work?

1. Angular runs change detection using Zone.js
2. If data is changed, then UI updates automatically.

Q 2: What is the difference between Default and OnPush change detection?

Ans: Please go through the differences below.

Default Change Detection	OnPush Change Detection
Angular checks all components from top to bottom.	Angular checks component only when required.
It can impact performance in large applications.	It is used for high-performance apps.
It runs automatically on every async event.	It runs when input reference change.

Q 3: What is ChangeDetectorRef and when do you use it?

Ans: It is used for manual control to change detection. There are some methods of Change Detection.

1. detectChanges()
2. markForCheck()
3. detach()
4. reattach()

Example:

constructor(private cd: ChangeDetectorRef) {}
this.cd.markForCheck();

When do we use it?

1. It is used in External libraries.

2. It is used for OnPush components.

3. It is used for Performance optimization.

Q 4: What is the role of Zone.js?

Ans: Zone.js detects the async operations. and it notifies Angular when to run change detection.

Note: Without Zone.js, Angular will not auto-update.

Q 5: What are Angular Signals, and what are the benefits of them?

Ans: Signals are used for component state.

There are many benefits of Angular Signals

1. There is no need for RxJS in simple cases.
2. It is used for better performance.
3. It is used for Predictable state updates.

Q 6: Difference between Signals vs Observables?

Ans: Signals are used for UI state, while Observables are used for HTTP & streams.

Q 7: What is Dependency Injection, and what is the Dependency Injection hierarchy in Angular?

Ans: Dependency Injection (DI) is a design pattern where Angular provides the required dependencies (services) instead of creating them manually using the ‘new’ keyword.

Example:

constructor(private userService: UserService) {}

Please see below for the Dependency Injection hierarchy from Top to Bottom.

1. Root Injector
2. Module Injector
3. Component Injector
4. Directive Injector
5. Element Injector

Example of Module injector

@NgModule({
  providers: [ProductService]
})
export class ProductModule {}

Visual hierarchy

Root Injector
   ↓
Module Injector
   ↓
Parent Component
   ↓
Child Component
   ↓
Directive / Element

Q 8: What is the difference between providedIn: ‘root’ and providers array?

Ans: Please check below differences

Q 9: What is trackBy and why it is important?

Ans: trackBy is used to improves performance in *ngFor.

Example:

<li *ngFor="let item of items; trackBy: trackById">

Note: without trackBy, Angular recreates a DOM.

With trackBy → Angular updates only changed items.

Q 10: What are Standalone Components?

Ans: Standalone Components are launched in Angular 17 version.

There is no required of NgModule in Standalone Components.

Standalone Components are used for Faster setup and Cleaner architecture.

Example:

@Component({
  standalone: true,
  imports: []
})

Q 11: How does Lazy Loading improve performance?

Ans: Lazy loading is used to improve performance by reducing the initial bundle size and loading features only when they are needed.

How Lazy Loading Improves Performance

There are below points to show how Lazy loading improve performance.

1. Smaller Initial Bundle Size
2. Faster Application Startup
3. Reduced Network Usage
4. Better Memory Usage
5. Improved Scalability

Example of Lazy loading:

loadChildren: () =>
  import('./admin/admin.module').then(m => m.AdminModule)

Q 12: Explain RxJS switchMap, mergeMap, and concatMap

Ans: You will clear the switchMap, mergeMap, and concatMap

switchMap: It is used to cancel the previous inner Observable and subscribe only to the latest one.

fromEvent(searchInput, 'keyup').pipe(
  switchMap(() => api.search())
).subscribe();

What is the best use of switchMap?

1. It is used to search autocomplete.
2. It is used for Route-based API calls.
3. It is used to avoid unnecessary API calls.

mergeMap: It is used to run all inner Observables in parallel, and it does not cancel any request.

Example:

from(userIds).pipe(
  mergeMap(id => api.getUser(id))
).subscribe();

What is the best use of mergeMap?

1. It is used to make multiple independent API calls.
2. It is used for File uploads.
3. It is used for the Background Task.

concatMap: It is used to execute inner Observables one by one, and it waits for the previous to complete.

Example:

from(orders).pipe(
  concatMap(order => api.processOrder(order))
).subscribe();

Comparison Table:

Q 13: How do you prevent memory leaks in Angular?

Ans: There are many ways to prevent memory leaks in Angular

1. Unsubscribe Observables after use.
2. You should use an async pipe.
3. You should use takeUntil.

Q 14: Difference between ViewChild and ContentChild?

Ans: viewChild and ContentChild are both decorators.

What is ViewChild in Angular?

ViewChild is used to access:

1. A DOM element inside the component’s template.
2. A child component inside the template.
3. A directive is placed inside the template.
4. A template reference variable.

What is ContentChild in Angular?

It is used to access:

1. Projected content passed from the parent component.
2. ng-content inserted elements.
3. Template reference variables inside ng-content

Q 15: How does Angular handle security (XSS)?

Ans: Angular prevents XSS by default using automatic escaping, context-aware sanitization, and strict template rules.

1. Automatic HTML Escaping: By default, Angular escapes all values before rendering them in templates.

Example: Suppose you have below content in the userInput.

<script>alert('XSS')</script>

When we execute the code below, then Angular renders it as plain text.

{{ userInput }}

2. Context-Aware Sanitization

Angular sanitizes accordingly. Suppose you have below things in the htmlContent.

<script>, onClick and javascript: URLs

Then Angular removes the above tags.

Example:

<div [innerHTML]="htmlContent"></div>

Then Angular was removed automatically.

3. Template Security Rules

Angular does not allow the following things:

1. Dynamic script injection
2. Inline JavaScript execution
3. eval() in templates

Q 16: What are Route Guards?

Ans: Route Guards are used to protect routes. It is used for Authentication and Authorization.

It has many types of route guards.

1. CanActivate
2. CanDeactivate
3. CanLoad
4. Resolve

Q 17: What is Tree Shaking?

Ans: Tree Shaking is used to remove unused code during the build the App.

It is used for

1. Faster load
2. Smaller bundles

Note: It works best with Standalone components

Q 18: How is testing done in Angular?

Ans: Testing done in Angular supports unit testing, integration testing, and end-to-end (E2E) testing.

1. Unit Testing: In unit testing, you can test individual components, services, pipes, or functions. You can use testing Tools Jasmine, Karma.

2. Integration Testing: In integration testing, you can test multiple pieces working together, like

1. Component + template
2. Component + service

Note: Angular handles this mainly using TestBed.

3. End-to-End (E2E) Testing:

You can test the full application flow, from frontend to backend. There are some popular tools for E2E testing.

1. Cypress
2. Playwright

Q 19: What are Angular Interceptors?

Ans: Angular Interceptors are used to modify HTTP requests and responses.

a. What is an HTTP Interceptor?

Ans: HTTP Interceptor is a service that implements the HttpInterceptor interface and uses the intercept() method to handle HTTP requests and responses.

b. What is the use of Angular Interceptor?

Ans: It is commonly used for

1. Auth tokens
2. Error handling
3. Logging

Q 20: What are the best Angular performance practices?

Ans: There are many Angular performance practices.

1. Use OnPush Change Detection
2. Use Angular Signals
3. Use the Lazy Load Feature Modules
4. Use TrackBy in *ngFor
5. Avoid Functions in Templates
6. Use Async Pipe Instead of Manual Subscriptions