CngxDotStepperDot

Directivev0.1.0WCAG AA

projects/common/stepper/slots/dot-stepper-dot.directive.ts

Import#

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

Description#

Slot directive for the dot-body template on <cngx-dot-stepper>. Discovered via contentChild; cascades through CNGX_STEPPER_CONFIG.templates.dotStepperDot before falling back to the built-in empty body (the span itself paints the dot fill via CSS).

<cngx-dot-stepper [(activeStepIndex)]="active" aria-label="Carousel">
  <ng-template cngxDotStepperDot let-index let-active="active" let-completed="completed">
    @if (active) {
      <svg viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="3" fill="currentColor" /></svg>
    } @else if (completed) {
      <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2 5l2 2 4-4" stroke="currentColor" fill="none" /></svg>
    }
  </ng-template>
  <div cngxStep label="Slide 1"></div>
  <div cngxStep label="Slide 2"></div>
</cngx-dot-stepper>

https://cngxjs.github.io/cngx/examples/#/ui/stepper/dot-stepper/icon-dots-via-code-cngxdotstepperdot-code

Metadata#

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

Index#

Properties

templateRef

Instance Properties#

templateRef#unknown

Readonly

inject<TemplateRef<CngxDotStepperDotContext>>(TemplateRef)