Expert Angular Interview Questions and Answers

Internals Zone.js is a library that patches browser async APIs (setTimeout, Promise, DOM events, XHR) to create an “execution context” — called a zone — that intercepts when async operations start and finish. Angular uses this to know when to run change detection.

The change detection flow:

• A user clicks a button → Zone.js detects the event handler execution completes
• Zone.js notifies Angular’s NgZone
• Angular traverses the entire component tree from root to leaf, checking every component for changes
• Components with changed bindings get their DOM updated

// Running code outside Angular's zone (no CD triggered)
constructor(private ngZone: NgZone) {}

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    // Heavy third-party animation loop — won't trigger Angular CD
    requestAnimationFrame(this.animate.bind(this));
  });
}

// Re-enter Angular zone when you need to update the UI
updateUI() {
  this.ngZone.run(() => { this.count++; }); // triggers CD
}

Angular 18+ introduced Zoneless mode (developer preview) — removes Zone.js entirely, relying on Signals and explicit markForCheck() calls for fine-grained reactivity with lower overhead.

Compiler Ivy is Angular’s compilation and rendering pipeline, the default since Angular 9. It replaced the older View Engine (pre-v9).

Ivy advantages over View Engine:

• Better tree-shaking — Ivy stores component metadata locally in the component class (not in a central registry), so unused components are eliminated from the bundle
• Smaller bundles — Hello World app went from ~65KB to ~4KB with Ivy
• Faster compilation — incremental compilation only recompiles changed files
• Better debugging — component instances are directly accessible via ng.getComponent(el) in DevTools
• Locality principle — a component only needs to know about its own dependencies, not its consumers
• Enables Standalone Components — possible because Ivy doesn’t require NgModule for compilation

Compiler

• JIT (Just-in-Time) — templates are compiled in the browser at runtime. Requires the Angular compiler to be shipped to the client. Slower startup. Used in development (ng serve).
• AOT (Ahead-of-Time) — templates are compiled during the build step (ng build). The browser receives pre-compiled JavaScript — no template compiler needed. Faster startup, smaller bundle, errors caught at build time.

# Development (JIT by default in older setups)
ng serve

# Production (AOT enabled by default)
ng build --configuration=production

AOT benefits:

• Template errors (typos, wrong bindings) caught at build time, not user runtime
• No need to ship the Angular compiler (~40KB) to the browser
• Templates are pre-compiled to TypeScript/JavaScript — faster rendering
• Improved security — template injection attacks are prevented since templates aren’t evaluated at runtime

Since Angular 9 with Ivy, AOT is enabled by default even in development.

Angular 14+ Standalone Components can be used without declaring them in an NgModule. They manage their own imports directly via the imports array in their decorator.

// Standalone component — no NgModule needed
@Component({
  standalone: true,
  selector: 'app-user-card',
  imports: [CommonModule, RouterModule, DatePipe],  // direct imports
  template: `
    <div>{{ user.name }} — <a [routerLink]="['/user', user.id]">View</a></div>
    <p>Joined: {{ user.createdAt | date }}</p>
  `
})
export class UserCardComponent { @Input() user!: User; }

// Bootstrap a standalone app (no AppModule)
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations()
  ]
});

Benefits: less boilerplate, clearer dependencies per component, easier testing (no TestBed module setup), incremental migration path from NgModule-based apps. Angular 17+ uses standalone by default for new projects generated with the CLI.

Angular 16+ Signals are a reactive primitive introduced in Angular 16 — a wrapper around a value that notifies Angular when the value changes, enabling fine-grained reactivity without Zone.js.

import { signal, computed, effect } from '@angular/core';

@Component({ ... })
export class CartComponent {
  // signal — writable reactive value
  items = signal<CartItem[]>([]);
  discount = signal(0);

  // computed — derived read-only signal; recalculates only when dependencies change
  total = computed(() =>
    this.items().reduce((sum, i) => sum + i.price, 0) * (1 - this.discount())
  );

  // effect — runs a side effect when any read signal changes
  logEffect = effect(() => {
    console.log('Cart total changed:', this.total()); // auto-tracks dependencies
  });

  addItem(item: CartItem) {
    this.items.update(current => [...current, item]); // immutable update
  }
}

Signals read with signal() call syntax, write with .set() or .update(). Angular’s template engine tracks which signals are read during rendering and re-renders only the affected component when a signal changes — without needing Zone.js or explicit change detection calls.

Angular 17+ Angular 17 introduced a new template control flow syntax using @if, @for, and @switch blocks — replacing the structural directives *ngIf, *ngFor, and *ngSwitch.

<!-- Old syntax -->
<div *ngIf="user; else noUser">{{ user.name }}</div>
<ng-template #noUser><p>Not found</p></ng-template>
<li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>

<!-- New syntax (Angular 17+) -->
@if (user) {
  <div>{{ user.name }}</div>
} @else {
  <p>Not found</p>
}

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items in the list.</p>
}

@switch (status) {
  @case ('active')   { <span class="green">Active</span> }
  @case ('inactive') { <span class="red">Inactive</span> }
  @default           { <span>Unknown</span> }
}

Benefits: built into the compiler (no need to import CommonModule for ngIf/ngFor), better type narrowing in templates, @empty block for empty collections, required track expression (replaces trackBy).

Angular 17+ The @defer block enables declarative lazy loading of components within a template — deferring the download of a component’s JavaScript until a specific trigger condition is met.

@defer (on viewport) {
  <app-heavy-chart [data]="chartData" />  <!-- loaded when scrolled into view -->
} @loading (minimum 200ms) {
  <div class="skeleton">Loading chart...</div>
} @error {
  <p>Failed to load chart.</p>
} @placeholder {
  <div class="placeholder">Chart will appear here</div>
}

Available triggers:

• on viewport — when the placeholder enters the viewport
• on idle — when the browser is idle
• on interaction — when user clicks/focuses the placeholder
• on hover — when user hovers over the placeholder
• on timer(2s) — after a delay
• when condition — when a boolean expression becomes true

This is more powerful than loadChildren lazy loading because it works at the component level within a template, not just at the route level.

Angular 14+ The inject() function allows dependency injection outside of a constructor, enabling functional patterns for services and reusable injection logic.

import { inject } from '@angular/core';

// Traditional constructor injection
@Injectable({ providedIn: 'root' })
class OldService {
  constructor(private http: HttpClient) {}
}

// Functional injection with inject()
@Injectable({ providedIn: 'root' })
class NewService {
  private http = inject(HttpClient);  // same result, no constructor needed
}

// inject() in a functional guard (Angular 15+)
export const authGuard = (): boolean => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() || (router.navigate(['/login']), false);
};

// inject() in a base class (solves constructor-inheritance problem)
export class BaseComponent {
  protected router = inject(Router);
  protected logger = inject(LogService);
}
// Subclass doesn't need to pass services to super()
export class UserComponent extends BaseComponent {
  // router and logger available without super(router, logger)
}

Architecture Webpack Module Federation allows separately deployed Angular applications to share code at runtime — the foundation of micro-frontend architecture with Angular. The @angular-architects/module-federation plugin simplifies setup.

# Setup
ng add @angular-architects/module-federation --project shell --port 4200 --type host
ng add @angular-architects/module-federation --project mfe-orders --port 4201 --type remote

// Remote (mfe-orders) webpack.config.js
new ModuleFederationPlugin({
  name: 'mfe_orders',
  filename: 'remoteEntry.js',
  exposes: { './OrdersModule': './src/app/orders/orders.module.ts' },
  shared: { '@angular/core': { singleton: true }, '@angular/router': { singleton: true } }
})

// Shell app-routing.module.ts
{ path: 'orders', loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://localhost:4201/remoteEntry.js',
    exposedModule: './OrdersModule'
  }).then(m => m.OrdersModule)
}

Key constraints: Angular must be a singleton (shared dependency). Different teams can deploy different Angular versions IF they isolate carefully, but same version is strongly recommended. The shell app orchestrates navigation between micro-frontends.

Architecture Angular Elements (@angular/elements) converts Angular components into standard Web Components (Custom Elements). Once registered, they work in any HTML page — React apps, plain HTML, Vue, WordPress — without requiring Angular.

import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [RatingWidgetComponent],
  entryComponents: [RatingWidgetComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(RatingWidgetComponent, { injector: this.injector });
    customElements.define('app-rating', el);  // register as <app-rating>
  }
}

// Now usable in ANY page, framework-agnostic
// <app-rating max="5" value="3"></app-rating>

Use cases:

• Embedding Angular widgets in a non-Angular host application
• Sharing components across a mixed framework portfolio
• CMS integrations (e.g., embedding in WordPress or a CMS page editor)
• Design system components deployed once, used everywhere

Tools The Angular CDK (@angular/cdk) provides low-level UI building blocks without opinionated styling — the primitives used to build Angular Material. You use CDK to build accessible, feature-complete custom UI components.

Key CDK modules:

• Overlay — positioning floating panels (tooltips, dropdowns, dialogs) relative to trigger elements
• Portal — dynamic component rendering at arbitrary DOM locations
• Virtual Scroll — CdkVirtualScrollViewport renders only visible list items — essential for 10,000-row lists
• Drag and Drop — sortable lists, kanban boards with cdkDrag / cdkDropList
• A11y — focus trapping, live announcer, keyboard navigation utilities
• Layout — BreakpointObserver for responsive design in TypeScript
• Table — data source patterns (pagination, sorting, filtering) for the CDK table component

DI forwardRef() resolves circular reference issues in Angular’s DI system — used when you need to reference a token or class that hasn’t been defined yet at the point of reference.

// Problem: NG_VALUE_ACCESSOR must reference the component itself
// but the component class isn't defined when the providers array is evaluated
@Component({
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent), // ✅ deferred reference
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor { ... }

// Without forwardRef — ReferenceError: Cannot access 'CustomInputComponent'
// before initialization

Another use case: two services that depend on each other (circular DI). However, circular dependencies usually indicate a design problem — consider extracting the shared logic into a third service. forwardRef is primarily a workaround for the NG_VALUE_ACCESSOR pattern when implementing custom form controls.

DI A multi-provider token allows multiple values to be registered under the same injection token — Angular collects them all into an array.

// Create a multi-provider token
export const VALIDATORS = new InjectionToken<Validator[]>('validators');

// Register multiple providers under the same token
@NgModule({
  providers: [
    { provide: VALIDATORS, useClass: RequiredValidator,   multi: true },
    { provide: VALIDATORS, useClass: EmailValidator,      multi: true },
    { provide: VALIDATORS, useClass: MaxLengthValidator,  multi: true }
  ]
})

// Inject all of them as an array
constructor(@Inject(VALIDATORS) private validators: Validator[]) {
  // validators = [RequiredValidator, EmailValidator, MaxLengthValidator]
}

// Real Angular example — HTTP_INTERCEPTORS
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor,    multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }

Multi-providers are the foundation of Angular’s interceptor, validator, and form accessor patterns. They enable plugins and extensions to register themselves without modifying a central list.

Performance Memory leaks in Angular are almost always caused by unreleased subscriptions to Observables that outlive the component.

Common causes:

• Subscribing in ngOnInit without unsubscribing in ngOnDestroy
• Using interval(), timer(), or WebSocket subjects without cleanup
• Event listeners added via addEventListener not removed on destroy
• Third-party library subscriptions not disposed

Solutions in order of preference:

// 1. BEST: async pipe — auto-unsubscribes
{{ users$ | async }}

// 2. takeUntilDestroyed (Angular 16+) — declarative, no ngOnDestroy needed
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
this.data$.pipe(takeUntilDestroyed()).subscribe(...);

// 3. Subject + takeUntil pattern
private destroy$ = new Subject<void>();
this.data$.pipe(takeUntil(this.destroy$)).subscribe(...);
ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }

// 4. Manual unsubscribe (most verbose, error-prone)
private sub!: Subscription;
ngOnInit()    { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); }

Architecture

• S — Single Responsibility: A component displays data and handles UI events. A service handles HTTP and business logic. A guard handles auth checks. Don’t mix these concerns.
• O — Open/Closed: Use @Input() configuration and content projection to extend component behaviour without modifying its source. An interceptor is open to new HTTP handling logic without touching existing ones.
• L — Liskov Substitution: A SortableTableComponent should work anywhere a TableComponent is used. Child components should honour their parent’s contract.
• I — Interface Segregation: Don’t inject a service with 20 methods when you only need 2. Split services: UserAuthService (login/logout) vs UserProfileService (update, fetch). Use TypeScript interfaces to expose only the methods a class needs.
• D — Dependency Inversion: Depend on abstractions. Inject an ILogger token instead of ConsoleLogger directly — swap with RemoteLogger in production without changing consuming code. Use abstract classes or InjectionTokens as DI contracts.

Angular 18+ Zoneless Angular removes the Zone.js dependency entirely. Instead of Zone.js notifying Angular of every async event, Angular relies on Signals and explicit markForCheck() calls for change detection.

// Enable zoneless in Angular 18+
bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

// Remove zone.js from polyfills (angular.json)
// "polyfills": []  ← remove zone.js

Benefits of going zoneless:

• Eliminate ~35KB Zone.js from the bundle
• Faster rendering — only components with changed signals re-render, not the whole tree
• Better compatibility with browser APIs that Zone.js can’t patch (AudioContext, WebWorkers)
• Simpler debugging — no “magic” async interception
• Aligns with the web platform direction

Zoneless is a developer preview in Angular 18 and will become the recommended default. It requires fully adopting Signals for state that drives change detection.

DevTools Angular DevTools is a Chrome/Firefox extension providing two key tabs:

Components tab: Browse the component tree, inspect Input/Output values, edit properties in real time, and see the rendered template for any component.

Profiler tab:

• Click Record, interact with the app, click Stop
• The flame chart shows which components ran change detection and how long each took
• Each bar represents a change detection cycle; width = duration
• Click a component bar to see “What triggered this change detection?” (input change, event, async pipe)
• A component appearing in every cycle when it shouldn’t → apply OnPush
• A component taking >16ms → investigate expensive template expressions or expensive ngDoCheck

// Enable profiling in production builds
import { enableProdMode } from '@angular/core';
// Don't call enableProdMode() during profiling sessions

Install: Angular DevTools Chrome Extension. Works with Ivy (Angular 9+) only.

Architecture

Technology decisions:

• Framework: Angular 17+ with Standalone Components and new control flow
• State: Signals for component state, NgRx Signal Store or Akita for global state, Angular Query for server state
• Styling: SCSS with Angular Material or Tailwind CSS
• Testing: Jest (unit/integration), Cypress (E2E)

Folder structure (domain-based):

src/
  app/
    core/           # Singleton services, guards, interceptors, app shell
    shared/         # Reusable components, directives, pipes, UI primitives
    features/       # Feature modules (independent domains)
      auth/         # components + services + routes for this domain
      orders/
      products/
    layout/         # Header, Sidebar, Footer components

Key rules: Feature modules don’t import from each other. Shared module contains only dumb (presentational) components. Core module contains smart (stateful) singleton services. Apply OnPush to all components. Use standalone components for new features.

SSR When Angular Universal renders a page server-side, it may make HTTP requests to fetch data. Without Transfer State, the browser would make those same HTTP requests again during hydration — a wasteful double fetch.

Transfer State serialises the server’s HTTP response into the HTML sent to the browser. On the client, Angular reads this pre-fetched data instead of making a new request.

// In a service — works on both server and browser
@Injectable({ providedIn: 'root' })
export class ProductService {
  private readonly PRODUCTS_KEY = makeStateKey<Product[]>('products');

  constructor(
    private http: HttpClient,
    private transferState: TransferState
  ) {}

  getProducts(): Observable<Product[]> {
    if (this.transferState.hasKey(this.PRODUCTS_KEY)) {
      const products = this.transferState.get(this.PRODUCTS_KEY, []);
      this.transferState.remove(this.PRODUCTS_KEY);
      return of(products); // Use pre-fetched data
    }
    return this.http.get<Product[]>('/api/products').pipe(
      tap(products => this.transferState.set(this.PRODUCTS_KEY, products))
    );
  }
}

Angular 16+ can automate this with withHttpTransferCache() in provideClientHydration().

Angular 17/18

Angular 17 (November 2023):

• New control flow — @if, @for, @switch blocks in templates (built into compiler, no imports)
• @defer blocks — declarative lazy loading at component level
• Signals stable — signal(), computed(), effect() are stable APIs
• New project default — Standalone Components, new control flow, Vite + esbuild by default
• Build performance — esbuild replaces Webpack for dramatically faster builds
• SSR improvements — better hydration, provideClientHydration() stable

Angular 18 (May 2024):

• Zoneless (experimental) — provideExperimentalZonelessChangeDetection()
• Material 3 — Angular Material fully migrated to Material Design 3
• Signal-based forms (RFC) — proposal for reactive forms built on Signals
• Route-level render mode — per-route SSR/SSG/CSR configuration in SSR apps

DI

• providedIn: ‘root’ — service is tree-shakeable and registered with the root injector. Created lazily (only when first injected). Available application-wide as a singleton. Recommended for most services.
• providedIn: ‘any’ — creates a separate singleton per lazy-loaded module that injects it. Different lazy modules get their own instance.
• Module providers array — registered when the module is loaded. Not tree-shakeable (always included in bundle). Use when the service must be eagerly available.
• Component providers array — creates a new instance per component. Destroyed with the component. Use for services that hold component-specific state.

// Singleton — application-wide, tree-shakeable (recommended)
@Injectable({ providedIn: 'root' })
export class UserService {}

// Per-component instance — scoped to component lifecycle
@Component({
  providers: [FormStateService]  // new instance for each component
})
export class CheckoutComponent {}

// Per lazy-module instance
@Injectable({ providedIn: 'any' })
export class FeatureService {}