CngxStepIndicator

Directivev0.1.0WCAG AA

projects/common/stepper/slots/step-indicator.directive.ts

Import#

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

Description#

Slot directive for the indicator-glyph template on <cngx-stepper>. Discovered via contentChild; cascades through CNGX_STEPPER_CONFIG.templates.indicator before falling back to the built-in numeric span ({{ position }}).

<cngx-stepper>
  <ng-template cngxStepIndicator let-position let-node="node" let-status="status">
    @if (status === 'success') {
      <my-icon name="check" />
    } @else if (status === 'error') {
      <my-icon name="alert" />
    } @else {
      <span class="my-step-num">{{ position }}</span>
    }
  </ng-template>
</cngx-stepper>

https://cngxjs.github.io/cngx/examples/#/ui/stepper/stepper-slot-overrides/custom-indicator-glyph-via-code-cngxstepindicator-code https://cngxjs.github.io/cngx/examples/#/ui/stepper/stepper-slot-overrides/cross-skin-indicator-override

Metadata#

Selector: ng-template[cngxStepIndicator]
Export as: cngxStepIndicator

Index#

Properties

templateRef

Instance Properties#

templateRef#unknown

Readonly

inject<TemplateRef<CngxStepIndicatorContext>>(TemplateRef)