import { NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, Directive } from '@angular/core'; import { NgbStep, NgbStepHeader, NgbStepper, NgbStepperStep, provideStep, aliasStepper, stepperAnimation, } from '@ngbase/adk/stepper'; @Component({ selector: 'mee-stepper', exportAs: 'meeStepper', changeDetection: ChangeDetectionStrategy.OnPush, providers: [aliasStepper(Stepper)], imports: [NgTemplateOutlet, NgbStepperStep], template: `

@for (step of steps(); track step) {

@if (step.header(); as header) { } @else { {{ step.title() }} }

@if (step.verticalTemplate(); as template) {

}

`, animations: [stepperAnimation], }) export class Stepper extends NgbStepper {} @Component({ selector: 'mee-step', exportAs: 'meeStep', changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideStep(Step)], imports: [NgTemplateOutlet], template: `

@if (horizontalTemplate(); as template) {

} `, }) export class Step extends NgbStep {} @Directive({ selector: '[meeStepHeader]', hostDirectives: [NgbStepHeader], }) export class StepHeader {}

Getting Started

Stepper