Skip to main content
cngx-src documentation

CngxStepperRouterSync

DirectivePrimaryv0.1.0WCAG AA

projects/common/stepper/router-sync.directive.ts

Import#

import { CngxStepperRouterSync } from '@cngx/common/stepper'

Description#

URL deep-linking for the stepper. Bidirectional sync between activeStepId and a URL fragment / query-param. Opt-in via [cngxStepperRouterSync] on the presenter element.

  • mode = 'fragment' (default) → #step=customer
  • mode = 'queryParam' with paramName = 'step'?step=customer

Router is optional - without @angular/router the directive dev-warns once and becomes a no-op.

https://cngxjs.github.io/cngx/examples/#/ui/stepper/stepper-router-sync/deep-linking-with-fragment-queryparam-modes

Metadata#

Index#

Inputs#

modeInput#'fragment' | 'queryParam' | undefined
input()
default undefined, { alias: 'mode' }
paramNameInput#string | undefined
input()
default undefined, { alias: 'paramName', }

Outputs#

syncError#unknown
output()

Emits when a router.navigate rejection is observed.

Methods#

ngAfterContentInit#void

Seed from the URL before the stepper renders its panels. CngxStep registers in ngOnInit (so a bound [id] reaches the registry), which runs before the host's ngAfterContentInit - the registry is populated by the time this runs, and the host view has not rendered yet, which is what keeps a panelMode="lazy" default step from counting its first render as a first activation on a deep link that named another step.

Own router guard: the constructor's early return does not stop lifecycle hooks from running.