client/src/app/+signup/+register/custom-stepper.component.ts

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