Interceptors act as middleware for all HTTP requests and responses in Angular.

Internally, Angular creates a chain of interceptor handlers. Each interceptor receives the outgoing request, can clone or modify it, and then passes it to the next handler. Responses flow back in reverse order, allowing global transformations.

Common uses: authentication tokens, error handling, logging, retry logic, preventing duplicate calls.

Token handling must prioritize security. Best practices include:

• Store tokens in memory or sessionStorage (avoid localStorage for sensitive apps).
• Use HttpOnly cookies when backend supports them.
• Add tokens only through interceptors.
• Avoid placing tokens in URLs.
• Implement token refresh + logout on refresh failure.
• Never expose secrets in frontend code.

Angular i18n extracts translatable strings from templates and applies translations at build time.

The Angular compiler replaces template text with localized versions, generating separate build bundles for each locale. ICU expressions manage pluralization and formatting, improving runtime performance and memory usage.

Content Projection inserts external content into a child component's template, enabling reusable layout patterns.

View Projection uses internal views created by the component via ViewChild, ViewContainerRef, or embedded views.

Content projection passes external markup; view projection manages internal view trees.

AOT compiles Angular templates to optimized JavaScript during build, not in the browser.

Benefits: faster startup, smaller bundles, better security, and earlier error detection. AOT is the default mode for production builds.

Angular destroys component instances automatically when navigating, but developers must prevent memory leaks by:

• Unsubscribing Observables using async pipe or takeUntil.
• Clearing intervals/timeouts.
• Removing manual event listeners.
• Avoiding storing component references in services.

Smart Components handle data fetching, state management, and service interactions.

Dumb Components focus purely on presentation, using @Input and @Output. They are reusable, testable, and predictable.

This separation improves scalability and modularity in enterprise Angular applications.

The rendering pipeline steps:

1. Change detection runs to identify data changes.
2. Angular updates DOM nodes via compiled instructions.
3. Directive inputs + lifecycle hooks run.
4. Browser recalculates styles and layout.
5. Paint + render occurs.

Angular optimizes minimal DOM updates for performance.

Custom decorators allow attaching metadata or logic to classes, properties, or methods. They are useful for logging, validation, metadata injection, and reducing boilerplate.

However, overuse can create hidden complexity and should be applied selectively.

Major risks include:

• XSS – rely on Angular sanitization, avoid bypassSecurityTrust.
• CSRF – use server-issued anti-forgery tokens or HttpOnly cookies.
• Sensitive data exposure – never store secrets in the frontend.
• Clickjacking – enforce frame-ancestors policies on server.
• API abuse – ensure backend role validation and rate limiting.

NgZone allows Angular to track asynchronous operations such as HTTP requests, timeouts, promises, and events. When these operations complete, Angular triggers change detection to update the UI automatically.

Developers can execute heavy tasks outside Angular’s zone using runOutsideAngular() to avoid unnecessary change detection and improve performance.

Default Strategy: Angular runs change detection for the entire component tree whenever any async event occurs. Simple but expensive for large apps.

OnPush Strategy: Angular checks the component only when its input reference changes, an observable emits, or an event originates from the component. This dramatically improves performance.

Smart Components handle data loading, business logic, and state management.

Dumb Components only display UI, receive input, and emit events.

This pattern increases reusability, makes components more testable, and keeps UI clean and maintainable.

Common leak causes include:

• Unsubscribed Observables
• DOM references kept alive
• Event listeners not removed
• Intervals/timeouts not cleared

Angular avoids leaks via async pipe, takeUntil, DestroyRef, and proper cleanup patterns.

Template-Driven Forms: Defined mostly in HTML, suitable for simple forms, limited dynamic capability.

Reactive Forms: Structured entirely in TypeScript, scalable, predictable, supports dynamic fields, custom validators, and is ideal for enterprise-level applications.

Performance debugging techniques include:

• Using Angular DevTools to inspect change detection
• Profiling DOM updates and rerenders
• Checking unnecessary subscriptions
• Auditing bundle size and lazy-loading usage
• Using browser Performance tools to identify bottlenecks

SSR pre-renders Angular pages on the server using Angular Universal.

Benefits include improved SEO, faster first contentful paint, better performance on slow devices, and reduced time-to-interactive.

The server renders HTML ? browser loads it ? Angular hydrates and takes over as a SPA.

Custom Pipes transform UI data, but avoid heavy logic inside pipes because they can re-run frequently. Use memoization or pre-computed values when needed to avoid performance issues.

Angular supports:

• Build-time localization
• Static translations via Angular i18n
• Runtime translations via ngx-translate
• Locale-specific formatting for dates, currency, numbers

i18n is essential for global and multilingual applications.

Signals store synchronous reactive values and update the UI automatically without subscriptions.

They simplify state management, eliminate manual cleanup, and improve performance. Observables remain essential for asynchronous workflows, but signals simplify UI state handling.