Skip to main content
cngx-src documentation

CngxStepperNext

DirectivePrimaryv0.1.0WCAG AA

projects/common/stepper/controls/stepper-next.directive.ts

Import#

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

Description#

Turns any clickable element into a stepper "Continue" control. Same host resolution as CngxStepperCount - explicit [host] input falling back to the ambient CNGX_STEPPER_HOST.

(click) advances via selectNext(). A turnkey re-entrancy guard disables the control when there is no enabled next step (!canGoNext()) OR while a commit is in flight (busy()) - an opt-in guard a consumer forgets is a silent double-commit (Pillar 2). The gate reads the host's canGoNext bound, which derives from the same select() predicates, so the affordance can never drift from the navigation it triggers.

Reflects the disabled state via aria-disabled only - never native disabled (which would steal focus, so AT could not reach the control to learn it is at-a-bound / busy) and never aria-busy (that is CngxAsyncStatus's sole responsibility). The handleClick guard blocks the action while disabled. Co-placing [cngxAsyncClick] here (which also gates aria-disabled and adds native disabled) warns in dev mode.

<button cngxStepperNext>Continue</button>

Metadata#

Host#

Index#

Inputs

Derived State

HostListeners

Inputs#

input()

Explicit stepper-host reference for placement outside the stepper tree ([host]="s.presenter"). When unset, the ambient CNGX_STEPPER_HOST is injected.

default null

HostBindings#

BindingExpression
[attr.aria-disabled]disabled() || null

HostListeners#

EventHandler
(click)click()