Advanced Framework Features

Relevant source files

Purpose and Scope

This document covers advanced Angular framework features that extend beyond core application development. These features enable sophisticated capabilities such as declarative lazy loading with defer blocks, server-side rendering (SSR), client-side hydration, framework-agnostic component packaging with Angular Elements, and comprehensive security mechanisms.

For fundamental application architecture, see Core Runtime Architecture. For routing and navigation features, see Router System. For reactive forms capabilities, see Forms System.

Defer Blocks and Lazy Loading

Defer blocks (@defer) enable declarative lazy loading of components and their dependencies directly in templates. The defer block system manages loading states, triggers, and dependency resolution automatically.

Defer Block Architecture

Defer Block State Management and Triggers

Sources: packages/core/src/defer/instructions.ts125-173 packages/core/src/defer/interfaces.ts34-45 packages/core/src/defer/triggering.ts169-183

Defer Block Implementation

The compiler generates the ɵɵdefer instruction which initializes TDeferBlockDetails during the first template pass packages/core/src/defer/instructions.ts144-173 It stores metadata about the primary, loading, placeholder, and error templates packages/core/src/defer/instructions.ts156-170

Triggers are registered via specialized wrappers:

Idle: Uses onIdleWrapper to trigger when the browser is idle packages/core/src/defer/instructions.ts32
Viewport: Uses onViewportWrapper to detect when the placeholder enters the viewport packages/core/src/defer/instructions.ts30
Timer: Uses onTimer for scheduled delays packages/core/src/defer/instructions.ts46
Interaction/Hover: Leverages primitives for DOM events packages/core/src/defer/instructions.ts31

For details, see Defer Blocks and Lazy Loading.

Server-Side Rendering (SSR)

Angular's SSR implementation uses @angular/platform-server to render applications on Node.js, producing HTML for faster initial page loads and SEO. It supports various RenderMode options including Server, Client, and Prerender adev/src/content/guide/ssr.md86-92

SSR and Metadata Generation

SSR generates specialized metadata used by the client for hydration. This includes:

ngh Attribute: An index pointing to hydration data in the transfer state packages/core/src/hydration/utils.ts83-88
Transfer State: A JSON blob containing component structures and serialized LView data packages/core/src/hydration/utils.ts55-69
HTTP Transfer Cache: Caches HttpClient requests made on the server to be reused on the client, avoiding duplicate network calls packages/common/http/src/transfer_cache.ts33-40

Sources: packages/core/src/hydration/annotate.ts145-155 packages/core/src/hydration/utils.ts47-69 adev/src/content/guide/ssr.md31-53

For details, see Server-Side Rendering.

Hydration System

Hydration reuses server-rendered DOM instead of destroying and recreating it. Angular supports full hydration, incremental hydration, and event replay.

Hydration and Event Replay Architecture

Hydration and Event Replay Pipeline

Sources: packages/core/src/hydration/api.ts30-43 packages/core/src/hydration/annotate.ts52-53 packages/core/src/hydration/api.ts192-205

Key Hydration Features

Event Replay: Captures events (like clicks) that happen before hydration completes and replays them once the app is stable packages/core/src/hydration/api.ts30
Incremental Hydration: Hydrates specific @defer blocks only when their triggers are met (e.g., hydrate on interaction) packages/core/src/hydration/utils.ts36-38
DOM Reuse: Uses enableLocateOrCreateElementNodeImpl and similar internal functions to claim existing DOM nodes packages/core/src/hydration/api.ts101-107

For details, see Hydration System.

Angular Elements

Angular Elements allow packaging Angular components as custom elements (Web Components).

createCustomElement: Converts an Angular component into a class that extends HTMLElement.
Attribute Mapping: Automatically maps HTML attributes to Angular @Input() properties.
Event Mapping: Maps Angular @Output() observables to standard DOM CustomEvent objects.

For details, see Angular Elements.

Content Security and Sanitization

Angular provides a multi-layered security architecture to prevent XSS.

DomSanitizer: The core service for sanitizing untrusted values in specific SecurityContexts (HTML, Style, URL, ResourceURL).
Trusted Types: Angular integrates with the browser's Trusted Types API to prevent string-based injection into dangerous DOM sinks.
CSP Nonce: Supports Content Security Policy nonces via the CSP_NONCE token to allow specific inline styles or scripts packages/core/src/render3/instructions/render.ts38-40

For details, see Content Security and Sanitization.

Animations System

The animations system provides a DSL for defining complex transitions.

TransitionAnimationEngine: The core engine that coordinates animation states and timing.
WebAnimationsDriver: The default driver that interfaces with the browser's Web Animations API.
Renderer Integration: Animations are hooked into the Renderer2 to trigger transitions during DOM manipulations.

For details, see Animations System.

Sources:

Defer Blocks: packages/core/src/defer/instructions.ts125-173 packages/core/src/defer/triggering.ts169-183
Hydration: packages/core/src/hydration/api.ts192-205 packages/core/src/hydration/utils.ts83-88
SSR: adev/src/content/guide/ssr.md1-53 packages/common/http/src/transfer_cache.ts33-76
Rendering Hooks: packages/core/src/render3/after_render/hooks.ts9