CngxStepperFooter
projects/ui/stepper/footer/stepper-footer.component.ts
Import#
import { CngxStepperFooter } from '@cngx/ui/stepper'
Description#
Navigation action-bar molecule for the stepper family.
Lays out three regions - start (Back), center (progress hint), end (Continue / Finish).
Wires the CNGX_STEPPER_HOST for any nav atoms a consumer drops inside.
Resolves its host like CngxStepperCount:
An explicit [host] input for placement outside the stepper tree, falling back to the ambient
host injected from an ancestor <cngx-stepper> / <cngx-mat-stepper>
(skipSelf, so the footer reads the real presenter rather than its own
re-provided proxy).
It then re-provides CNGX_STEPPER_HOST as a live
createStepperHostProxy over the resolved host, so child
[cngxStepperPrevious] / [cngxStepperNext] atoms resolve it
ambiently whether the footer is nested or used standalone with
[host]. providers (not viewProviders) carries the proxy to the
consumer-projected button content. With no host at all, the proxy's
neutral set renders the nav buttons disabled.
<cngx-stepper #s="cngxStepper"> … </cngx-stepper>
<cngx-stepper-footer [host]="s.presenter">
<button cngxStepperFooterStart cngxStepperPrevious>Back</button>
<cngx-stepper-count cngxStepperFooterCenter />
<button cngxStepperFooterEnd cngxStepperNext>Continue</button>
</cngx-stepper-footer>Metadata#
Providers#
CNGX_STEPPER_HOST- useFactory
(footer: CngxStepperFooter) => createStepperHostProxy(() => footer.resolvedHost())deps:CngxStepperFooter
Relationships
Depends on1
Index#
Inputs
Derived State
Inputs#
Explicit stepper-host reference for placement outside the stepper
tree ([host]="s.presenter"). When unset, the ambient
CNGX_STEPPER_HOST from an ancestor stepper is used.
nullStructural and thematic CSS for <cngx-stepper-footer>.
Track A (styleUrl): every spacing and color value is a registered
--cngx-stepper-footer-* custom property with a concrete default, so
the footer renders standalone without a theme.
The Material bridge
(@cngx/themes/material/stepper-theme) remaps the color tokens onto
--mat-sys-*.
Three flex regions - start, center, end - laid out in a row
that wraps on narrow viewports so the controls never overflow.