Skip to main content
cngx-src documentation

CngxStepperRouterSync

DirectivePrimaryv0.1.0WCAG AA

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

GitHub

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

Related#

Metadata#

Selector
[cngxStepperRouterSync]
Export as
cngxStepperRouterSync

Index#

Inputs

modeInputparamNameInput

Outputs

syncError

Derived State

modeparamName

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.

Enter to selectArrow Down Arrow Up to navigateEsc to close