Skip to main content
cngx-src documentation

CngxStepperComplete

DirectivePrimaryv0.1.0WCAG AA

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

Import#

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

Description#

Turns any clickable element into a stepper "Finish" control. Unlike CngxStepperNext (which reflects the commit state and advances), the finish action runs: the directive composes CngxAsyncClick via hostDirectives, so the runner owns the click lifecycle, aria-busy, and the pending-disable exactly as it does on a standalone button. The finish action is fed through the aliased [cngxStepperComplete] input.

Resolves its host like the sibling controls - explicit [host] input falling back to the ambient CNGX_STEPPER_HOST. isActive exposes whether the active step is the last one, so a consumer renders the finish control only on the final step. (completed) emits once after the action resolves successfully.

@if (s.presenter.isLastStep()) {
  <button [cngxStepperComplete]="submit" (completed)="done()">Finish</button>
}

Metadata#

Index#

Inputs

Outputs

Derived State

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

Outputs#

completed#void
output()

Emits once per pending → success transition of the finish action. Does NOT re-emit when the feedbackDuration window resets the runner back to idle - the transition tracker guards on the success edge only.