1 import { CdkStep, CdkStepper } from '@angular/cdk/stepper'
2 import { Component } from '@angular/core'
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?.dirty && step.stepControl.valid
20 isAccessible (index: number) {
21 const stepsCompletedMap = this.steps.map(step => this.isCompleted(step))
24 : stepsCompletedMap[index - 1]