如何重置为第一步 Angular 步进器 CDK？

Question

I have a list of item and each item have a button to show a modal stepper. When I click button of item 1 with id="1" and click stepper next to step 2 for example then close modal by click cancel on modal. Afterward I click open modal item 2 with id="2 but the stepper it still remain step 2 I want it reset to step 1

<app-ui-modal
  [(show)]="isShowModalStepper"
  [hiddenHeader]="false"
  [hiddenFooter]="true"
  [paddingNone]="true"
  [width]="60"
  [height]="">
  <div ui-modal-body>
    <app-stepper #cdkStepper [linear]="true">
      <cdk-step label="step 1" [editable]="true" [stepControl]="frmConfirmRight" [optional]="false">
        <ng-template cdkStepLabel>
          <span>STEP 1</span>
        </ng-template>
        <form [formGroup]="frmConfirmRight">
          <div class="my-4">
            <p class="text-center text-3xl text-orange-regular">Hello world</p>
            <div class="flex justify-center my-2">
              <app-ui-input-container>
                <app-ui-input-checkbox-wrapper label="Agree">
                  <input appUIInputCheckbox type="checkbox"
                    formControlName="confirm">
                </app-ui-input-checkbox-wrapper>
              </app-ui-input-container>
            </div>
          </div>
          <footer class="my-4 flex-center">
            <!-- Close modal -->
            <button class="mx-1 w-24" [size]="'md'" app-ui-button [variant]="'default'"
              (click)="isShowExclusion = !isShowExclusion">
              Cancel
            </button>
            <!-- Next step -->
            <button class="mx-1 w-24"
              [size]="'md'"
              [disabled]="frmConfirmRight.invalid"
              app-ui-button
              [variant]="'primary'"
              cdkStepperNext>
              Next step
            </button>
          </footer>
        </form>
      </cdk-step>

Any help is appreciated. Thanks you!

Answer 1

Reference your stepper and then call the following method at the appropriate time (this implementation assumes you are referencing the stepper from a parent component):

@ViewChild('cdkStepper') cdkStepper: MatStepper | undefined;

someMethod(){
  if(this.cdkStepper){
    this.cdkStepper.reset()
  }
}

Answer 2

After a while I found

<button class="mx-1 w-24" [size]="'md'" app-ui-button [variant]="'default'"
   (click)="isShowModalStepper = !isShowModalStepper; cdkStepper.reset()">
    Cancel
</button>