1 import { Component } from '@angular/core'
2 import { CdkStep, CdkStepper } from '@angular/cdk/stepper'
5 selector: 'my-custom-stepper',
6 templateUrl: './custom-stepper.component.html',
7 styleUrls: [ './custom-stepper.component.scss' ],
8 providers: [ { provide: CdkStepper, useExisting: CustomStepperComponent } ]
10 export class CustomStepperComponent extends CdkStepper {
12 onClick (index: number): void {
13 this.selectedIndex = index
16 isCompleted (step: CdkStep) {
17 return step.stepControl && step.stepControl.dirty && step.stepControl.valid
20 isAccessible (index: number) {
21 const stepsCompletedMap = this.steps.map(step => this.isCompleted(step))
24 : stepsCompletedMap[ index - 1 ]