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!
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>