Angular 22 Interview Questions & Answers

 

1. What is new in Angular 22?

Answer:
Angular 22 continues Angular's modern direction around:

• Standalone APIs
• Signals and signal-based reactivity
• Improved control flow
• Zoneless change detection
• Better TypeScript support
• Improved build and development tooling
• Performance improvements
• Modern Angular template syntax
• Improved SSR/hydration
• Continued reduction of legacy APIs

For an Angular 21 developer, the important point is that Angular 22 is primarily an evolution of the modern Angular architecture rather than a completely different framework.

---

2. What Angular version should you use with Angular 22?

Answer:
Angular 22 should be used with the Node.js and TypeScript versions officially supported by Angular 22.

In an upgrade, I would not manually guess these versions. I would first check Angular's version compatibility table and then upgrade the Angular CLI/framework and TypeScript together.

Common RxJS Pipe Operators with Simple Examples

 

1. map()

Transforms each value.

of(1, 2, 3).pipe(
  map(x => x * 10)
)
.subscribe(console.log);

Output:

10
20
30

Meaning:

• Takes each value
• Changes it
• Returns new value

What is the difference between devDependencies and dependencies in package.json?

 

🔹 dependencies

Packages your app needs to run in production.

• Used in the app's runtime code

• Installed on both development and production environments

• Example: Frameworks, HTTP clients, database drivers

Example:

"dependencies": {
  "express": "^4.18.2",
  "axios": "^1.6.0"
}

What is the difference between NgZone and CDR in Angular

 NgZone vs ChangeDetectorRef (CDR) in Angular

Both NgZone and ChangeDetectorRef (CDR) help with change detection, but they serve different purposes.

---

🔹 NgZone

NgZone is a service that controls how Angular detects changes globally across the application. It helps manage execution inside or outside Angular's change detection system.

✅ When to Use NgZone?

1. Running non-Angular events (like setTimeout, WebSockets, or third-party libraries) inside change detection.
2. Skipping change detection for performance (e.g., animations, timers).

🔹 Key Methods:

• run(callback) → Forces Angular to detect changes.
• runOutsideAngular(callback) → Runs code outside change detection (for performance).

Example:

? and ! symbol in Angular

 In Angular, both ! and ? serve different purposes and have specific meanings.

1. !: This symbol is primarily used in Angular template expressions to indicate a non-null assertion. When you use ! after a property or expression, you're telling TypeScript that you're confident that the value won't be null or undefined. It's often used when you know for sure that a value exists, but TypeScript's static analysis cannot infer it.

How many route guards are available in Angular 17?

Angular 17 Router Guards: A Concise Guide

In Angular 17, router guards have evolved to provide a more concise and modern approach, leveraging functional programming introduced in Angular v14.2. These guards facilitate fine-grained control over navigation, authentication, data resolution, and lazy loading of modules. Let's explore the six different router guards available in Angular 17:

1. CanActivateFn

• Purpose: Determines if a route can be activated.
• Logic: Returns a boolean, UrlTree, or an Observable/Promise resolving to one of these.
  • true: Navigation proceeds.
  • false: Navigation is blocked.
  • UrlTree: Redirection to a different route.
• Use Cases:
  • Authentication checks (redirect to login if not authorized)
  • Role-based authorization
  • Prevent access to partially completed forms