CngxBreadcrumbRouterSync

DirectivePrimaryv0.1.0WCAG AA

projects/ui/breadcrumb/breadcrumb-router-sync.directive.ts

Import#

import { CngxBreadcrumbRouterSync } from '@cngx/ui/breadcrumb'

Description#

Opt-in router mode for CngxBreadcrumbBar. Add routerSync to a <cngx-breadcrumb> and the trail is derived from the activated route tree - every route whose data[dataKey] (default data.breadcrumb) is a non-empty string contributes a crumb, terminal marking follows from position. The bar reads the trail through the CNGX_BREADCRUMB_ITEMS_SOURCE seam (provided here via useExisting), so the directive never writes the bar's [items] input and never injects the concrete bar class - decompose-clean (Pillar 1; reference_atomic_decompose rule 4).

The navigation stream converts to a signal at the boundary via toSignal (Pillar 1, no raw subscription); the trail is a computed over that trigger and dataKey, carrying a shape-based equal so a same-shape navigation does not cascade the trail. Router is optional - without it the directive logs a dev warning and stays an empty source.

<cngx-breadcrumb cngxRouterSync />

// Route config supplies the crumb labels:
{ path: 'catalog', data: { breadcrumb: 'Catalog' }, children: [
  { path: 'books', data: { breadcrumb: 'Books' } },
] }

https://cngxjs.github.io/cngx/examples/#/ui/breadcrumb/router/router-driven

Metadata#

Selector: cngx-breadcrumb[cngxRouterSync]
Export as: cngxBreadcrumbRouterSync
Implements: CngxBreadcrumbItemsSource

Providers#

CNGX_BREADCRUMB_ITEMS_SOURCE: useExisting CngxBreadcrumbRouterSync

Relationships

Depends on1

CNGX_BREADCRUMB_ITEMS_SOURCEservice

Index#

Properties

crumbs

Inputs

dataKey iconKey

Inputs#

dataKey#string

input()

Route data key the trail is read from. Falls back through the config cascade to 'breadcrumb'; override per-instance to read a different key (mirrors the sibling's paramName).

default this.cfg.router?.dataKey ?? 'breadcrumb'

iconKey#string

input()

Route data key each crumb's opaque icon token is read from. Falls back through the config cascade to 'icon'; override per-instance to read a different key (mirrors dataKey).

default this.cfg.router?.iconKey ?? 'icon'

Instance Properties#

crumbs#Signal

Readonly

The router-derived trail. Wins over the bar's [items] input.