Angular Interview Questions

What is a Memory Leak?

A memory leak happens when your app keeps holding onto memory that it no longer needs.
In Angular, this usually means you’ve created references (like event listeners, subscriptions, DOM objects) that are never cleaned up — so the Garbage Collector cannot free them.
Over time, the app’s memory usage keeps growing → leading to slow performance or even crashes.

Common Causes of Memory Leaks in Angular:

1. Unsubscribed Observables / Subscriptions

If you don’t unsubscribe in ngOnDestroy, the subscription stays alive.

2. Event Listeners not removed

If not removed, the component will still respond to resize even after destruction.

3. Timers not cleared

If you don’t clearInterval, it keeps running.

How to Prevent Memory Leaks

1. Unsubscribe properly

2. Use async pipe

Instead of subscribing manually:

3. Remove event listeners & clear timers

A memory leak in Angular means resources are not released properly (like Observables, event listeners, timers, or DOM references). The fix is to unsubscribe, clean up, and use Angular features (async pipe, takeUntil, ngOnDestroy`) properly.

How to copy a reference from one variable to another?

What is server-side rendering in Angular?

Server-Side Rendering (SSR) in Angular is the process of rendering Angular applications on the server instead of the browser. With SSR, the Angular app is executed on the server, generating HTML which is sent to the browser. The browser displays a fully rendered page instantly, and then Angular takes over to make it interactive.

Benefits of SSR

• Faster First Contentful Paint (FCP)
• Better SEO (search engines can crawl HTML easily)
• Improved performance on slow networks or devices
• Better user experience

If I am making a Spring Boot REST API + Angular project, how will SSR work instead of Node.js?

Normally, Angular Universal requires a Node.js (Express) server to perform SSR. In a Spring Boot + Angular project:

Option 1: Use Node.js alongside Spring Boot:
   • Spring Boot serves REST APIs (/api/**).
   • Angular Universal runs on Node.js to handle SSR.
   • A reverse proxy (like Nginx) directs frontend routes to Node.js and API routes to Spring Boot.

Option 2: Use Pre-rendering (without Node.js):
   • Angular Universal or Scully can pre-generate static HTML at build time.
   • These static pages can be served directly from Spring Boot.
   • Suitable for static pages but not for dynamic user-specific content.

State Management in Angular

🔹Introduction

State Management in Angular refers to how application data (state) is stored, updated, and shared across components and services.
It ensures consistency, scalability, and predictability, especially as applications grow in complexity.

---

🔹 Types of State

1. Local State – Data inside a single component (e.g., form input, toggle button).
   ✅ Managed using component variables.

2. Shared State – Data shared across multiple components (e.g., logged-in user info, theme preference).
   ✅ Managed using Services + RxJS (BehaviorSubject, ReplaySubject).

3. Global/Application State – Data needed across the entire app (e.g., authentication, shopping cart, notifications).
   ✅ Managed using state management libraries like NgRx, NGXS, or Akita.

---

🔹 Common Approaches in Angular

1️⃣ Service with RxJS

• Use BehaviorSubject or ReplaySubject in a service to hold and emit state.

• Components subscribe to get updates.

Example – AuthService managing user state:

@Injectable({ providedIn: 'root' })
export class AuthService {
  private userSubject = new BehaviorSubject<User | null>(null);
  user$ = this.userSubject.asObservable();

  setUser(user: User) {
    this.userSubject.next(user);
  }
}

• Any component can subscribe:

this.authService.user$.subscribe(user => console.log(user));

---

2️⃣ NgRx (Redux Pattern for Angular)

• Predictable state container using:

  • Actions → What happened (e.g., Login, Logout).

  • Reducers → How the state changes.

  • Store → Single source of truth for the entire app.

• Best for large & complex applications.

• Comes with DevTools (time-travel debugging, action logging).

---

🔹 Why State Management is Important?

✔ Prevents data inconsistency across components.
✔ Makes apps scalable and maintainable.
✔ Simplifies debugging and testing.
✔ Provides a centralized single source of truth.

---

🔹 Interview-Ready Answer

State management in Angular is about handling and sharing application data consistently.
For small apps, I usually rely on services with RxJS subjects.
For larger applications, I use NgRx, which follows the Redux pattern and provides a single source of truth, predictable state transitions, and better debugging with DevTools.
This ensures data consistency, scalability, and maintainability of the application.