\n \n \n \n \n \n `,\n})\nexport class UsersLayoutComponent {}\n```\n\n## Functions\n\nAll inject functions must be called within an injection context (constructor, field initializer, or `runInInjectionContext`). Route state functions return `RouteSignals` — an object with a `routeState` signal and a stable `navigator` reference.\n\n| Function | Returns | Reactive? |\n| ------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `injectRouter()` | `Router` | Never |\n| `injectNavigator()` | `Navigator` | Never |\n| `injectRoute()` | `RouteSignals` | `routeState` on every navigation |\n| `injectRouteNode(name)` | `RouteSignals` | When the node subtree is entered, left, or changes between descendants (uses `shouldUpdateNode` — sibling-leaf transitions within the same subtree still fire) |\n| `injectRouteUtils()` | `RouteUtils` | Never |\n| `injectRouterTransition()` | `Signal` | On transition start/end |\n| `injectIsActiveRoute(name, params?, search?, options?)` | `Signal` | On active state change |\n| `injectRouteExit(handler, options?)` | `void` — wraps `subscribeLeave` with abort + same-route guards | Never (handler captured at injection time) |\n| `injectRouteEnter(handler, options?)` | `void` — fires once on nav-driven mount via `effect()` + `transition.from` | Never (handler captured at injection time) |\n\n`RouteSignals` shape:\n\n```typescript\ninterface RouteSignals {\n readonly routeState: Signal; // { route, previousRoute }\n readonly navigator: Navigator;\n}\n```\n\n```typescript\n// injectRouteNode — updates only when \"users.*\" changes\n@Component({\n selector: \"app-users-layout\",\n template: `\n @if (route.routeState().route; as r) {\n @switch (r.name) {\n @case (\"users\") {\n \n }\n @case (\"users.profile\") {\n \n }\n }\n }\n `,\n})\nexport class UsersLayoutComponent {\n readonly route = injectRouteNode(\"users\");\n}\n\n// injectNavigator — stable reference, never reactive\n@Component({\n selector: \"app-back-button\",\n template: ``,\n})\nexport class BackButtonComponent {\n private readonly navigator = injectNavigator();\n\n goHome(): void {\n this.navigator.navigate(\"home\");\n }\n}\n\n// injectRouterTransition — progress bars, loading states\n@Component({\n selector: \"app-progress\",\n template: `\n @if (transition().isTransitioning) {\n \n }\n `,\n})\nexport class ProgressComponent {\n readonly transition = injectRouterTransition();\n}\n\n// injectRouteExit — exit animations, draft autosave, AbortSignal-aware cleanup\n@Component({\n selector: \"app-fade-out\",\n template: `
...
`,\n})\nexport class FadeOutComponent {\n private el = viewChild.required>(\"box\");\n\n constructor() {\n injectRouteExit(async ({ signal }) => {\n const el = this.el().nativeElement;\n el.classList.add(\"fade-out\");\n const cleanup = () => el.classList.remove(\"fade-out\");\n signal.addEventListener(\"abort\", cleanup, { once: true });\n el.getBoundingClientRect(); // style flush\n await Promise.allSettled(el.getAnimations().map((a) => a.finished));\n cleanup();\n });\n }\n}\n\n// injectRouteEnter — page-enter analytics, focus management, entry animations\n@Component({ selector: \"app-page-enter\", template: \"\" })\nexport class PageEnterAnalyticsComponent {\n constructor() {\n injectRouteEnter(({ route, previousRoute }) => {\n analytics.track(\"page_enter\", {\n route: route.name,\n from: previousRoute.name,\n });\n });\n }\n}\n```\n\n> **Angular handler-reactivity:** `inject*` functions run once at construction,\n> so `handler` is captured at injection time. Pass a class method (stable\n> identity) and read signals **inside** the handler body to react to changes.\n> See [CLAUDE.md](./CLAUDE.md) → \"injectRouteExit / injectRouteEnter Handler\n> Is Captured At Injection Time\".\n\n## Components\n\n### ``\n\nDeclarative route matching. Renders the first `ng-template[routeMatch]` whose segment matches the active route.\n\n```html\n\n \n \n \n \n \n \n \n \n \n\n```\n\nThe `routeNode` input (aliased from `nodeName`) scopes the view to a subtree. Pass `\"\"` for the root level, or a route name like `\"users\"` for nested layouts:\n\n```html\n\n\n \n \n \n\n```\n\n> **Note:** The input is named `routeNode` (not `nodeName`) because `nodeName` is a read-only property on `HTMLElement`. Angular's template binding would fail with the unaliased name.\n\n### ``\n\nDeclarative error handling for navigation errors. Renders its content normally and shows an error template alongside it when a guard rejects or a route is not found.\n\n```typescript\nimport { RouterErrorBoundary, type ErrorContext } from \"@real-router/angular\";\n```\n\n```html\n\n Go to Protected\n\n\n\n
\n {{ error.code }}\n \n
\n\n```\n\nThe template context is typed as `ErrorContext`:\n\n```typescript\ninterface ErrorContext {\n $implicit: RouterError; // the navigation error\n resetError: () => void; // dismiss the error\n}\n```\n\nAuto-resets on the next successful navigation. Works with both `realLink` and imperative `router.navigate()`.\n\n### ``\n\nWCAG-compliant screen reader announcements for route changes. Add it once near the root of your application:\n\n```html\n\n```\n\nSee the [Accessibility](#accessibility) section for details.\n\n### `` / `` (`@real-router/angular/ssr`)\n\nPaired SSR-aware boundaries. `` renders the bound `fallback` `TemplateRef` on the server (and on the client first paint, to match SSR HTML), then swaps in the projected children after mount. `` is the symmetric inverse.\n\nImported from the `/ssr` subpath (ng-packagr secondary entry-point). The same `/ssr` entry also exposes `injectDeferred()` — see [packages/angular/CLAUDE.md](./CLAUDE.md) — for cross-adapter parity with `@real-router/{react,preact,solid,vue,svelte}/ssr`.\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { ClientOnly, ServerOnly } from \"@real-router/angular/ssr\";\n\n@Component({\n selector: \"app-home\",\n template: `\n \n Loading…\n \n \n \n \n\n \n \n \n `,\n imports: [ClientOnly, ServerOnly],\n})\nexport class HomeComponent {}\n```\n\nImplementation: `signal(false)` + `afterNextRender(() => mounted.set(true))`. `afterNextRender` is a no-op on the server (Angular runtime guarantees), so SSR naturally lands on the SSR-side branch. End-to-end dogfooding lives in [`examples/web/angular/ssr-examples/ssr/`](../../examples/web/angular/ssr-examples/ssr/) (see `e2e/ssr-boundaries.spec.ts`).\n\n### `` (`@real-router/angular/ssr`)\n\nRender-time HTTP status declaration. Writes `code` to the optional `HttpStatusSink` provided via `provideHttpStatusSink`, then renders nothing. Last write wins. No-op when no sink is provided.\n\n```typescript\n// not-found.component.ts\nimport { Component } from \"@angular/core\";\nimport { HttpStatusCode } from \"@real-router/angular/ssr\";\n\n@Component({\n selector: \"app-not-found\",\n imports: [HttpStatusCode],\n template: `\n \n
Page not found
\n `,\n})\nexport class NotFoundComponent {}\n```\n\n```typescript\n// entry-server.ts\nimport { bootstrapApplication } from \"@angular/platform-browser\";\nimport {\n createHttpStatusSink,\n provideHttpStatusSink,\n} from \"@real-router/angular/ssr\";\n\nconst sink = createHttpStatusSink();\n\nawait bootstrapApplication(AppRoot, {\n providers: [\n provideRealRouterFactory({ baseRouter }),\n provideHttpStatusSink(sink),\n ],\n});\n\nresponse.status(sink.code ?? 200).send(html);\n```\n\n`HTTP_STATUS_SINK` is the underlying `InjectionToken` — inject it directly with `{ optional: true }` if you need to read the sink in your own components. `createHttpStatusSink()` constructs a fresh `{ code: number | undefined }` per request — read `sink.code` after the SSR render pass to set the response status. Loader-driven errors (`LoaderNotFound` → 404, `LoaderRedirect` → 30x) keep working as before; `` covers render-time decisions only.\n\n### `injectDeferred()` (`@real-router/angular/ssr`)\n\nReads `state.context.ssrDataDeferred[key]` (populated by `defer()` in `@real-router/ssr-data-plugin`). Returns `Signal` — `undefined` before the promise settles, the resolved value once it does. Compose with `@if` or the `async` pipe for pending UI:\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { injectDeferred } from \"@real-router/angular/ssr\";\n\n@Component({\n template: `\n @if (reviews(); as r) {\n @for (review of r; track review.id) {\n
{{ review.author }}
\n }\n } @else {\n
Loading reviews…
\n }\n `,\n})\nexport class ReviewsComponent {\n readonly reviews = injectDeferred(\"reviews\");\n}\n```\n\n**Full `/ssr` surface** (8 exports): `ClientOnly`, `ServerOnly`, `HttpStatusCode`, `injectDeferred`, `provideHttpStatusSink`, `HTTP_STATUS_SINK`, `createHttpStatusSink`, plus the `HttpStatusSink` type. See [`packages/angular/CLAUDE.md`](./CLAUDE.md#ssr-feature-surface--real-routerangularssr) for the implementation notes.\n\n## Directives\n\n### `realLink`\n\nNavigation directive for `` elements. Handles click events, sets `href`, and applies an active CSS class automatically.\n\n```html\n\n View Profile\n\n\n\n View Profile\n\n```\n\n| Input | Type | Default | Description |\n| ------------------- | ------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| `routeName` | `string` | `\"\"` | Target route name |\n| `routeParams` | `Params` | `undefined` | Route (path) parameters (omitted → `undefined`, shares one active-route source with `injectIsActiveRoute(name)`, #776) |\n| `routeSearch` | `SearchParams` | `undefined` | Query (search) params for the link's target (RFC-4 M2, #1548) — parallel to `routeParams`, the path/query split's view-layer channel |\n| `routeOptions` | `NavigationOptions` | `{}` | Navigation options (replace, etc.) |\n| `activeClassName` | `string` | `\"active\"` | CSS class applied when route is active |\n| `activeStrict` | `boolean` | `false` | Exact match only (no ancestor match) |\n| `ignoreQueryParams` | `boolean` | `true` | Query params don't affect active state |\n| `hash` | `string` | `undefined` | URL fragment (decoded). Tri-state: undefined preserves, `\"\"` clears, value sets. (#532) |\n\n#### `hash` input — URL fragment / tab-style UIs\n\n```html\nProfile\nAccount\n```\n\nActive class is hash-aware — only the matching tab lights up. Live demo: [`examples/web/react/hash-examples/link-hash/`](../../examples/web/react/hash-examples/link-hash/) — behavior is identical across adapters, only template syntax differs. See the [Hash Fragment Support](https://github.com/greydragon888/real-router/wiki/Hash) wiki page for the full surface.\n\n#### Object `routeParams` — content-stabilized\n\n`RealLink` and `RealLinkActive` stabilize `routeParams` by **content** (`shallowEqual` — `Object.is` per key, key-order-insensitive), so an inline `[routeParams]=\"{ id: '123' }\"` literal that Angular re-allocates on every change detection does **not** re-create the active-route source or re-run `buildHref` until the param content actually changes (#988). Binding a stable reference (a component field or signal) was already churn-free; this closes the gap for inline literals.\n\nCaveat: nested object/array param **values** are compared by reference, not deep — stabilize them with a `signal`/`computed` if it matters:\n\n```ts\n// flat params — stable across change detection, recompute only on real change\n@Component({ template: `` })\n// nested value — fresh ref each CD → href/active recompute every CD; stabilize:\nreadonly params = computed(() => ({ filters: [1, 2] }));\n// \n```\n\n`routeSearch` is **not** content-stabilized the same way (#1548) — an inline `[routeSearch]=\"{ tab: 'x' }\"` literal re-creates the active-route source and re-runs `buildHref` on every change detection, even when the query content is unchanged. Bind a stable reference (a component field or signal) if churn matters for your use case.\n\n### `[realLinkActive]`\n\nApplies an active CSS class to any element when a route is active. Use this when you need active state on a non-`` element, or when the clickable element and the styled element are different.\n\n```html\n