Я использую MatStepper и у меня есть компонент внутри mat-step, и внутри них есть кнопка, и мне нужно изменить шаг при нажатии на кнопку, я не уверен, возможно ли передать шаговый шаг как@Input, а затем измените для следующего шага.Я ищу, но не нашел ответов, связанных с этим.Кто-нибудь может мне помочь?
steppercomponent.html
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [completed]="false">
<ng-template matStepLabel>
<h5 class="step-title">Title 1</h5>
<div class="mat-step-custom-line"></div>
</ng-template>
<app-items-form [matStepper]="stepper"></app-items-form>
</mat-step>
<mat-step [completed]="false">
<ng-template matStepLabel>
<h5 class="step-title">Title 2</h5>
<div class="mat-step-custom-line"></div>
</ng-template>
</mat-step>
<mat-step [completed]="false">
<ng-template matStepLabel>
<h5 class="step-title">Title 3</h5>
<div class="mat-step-custom-line"></div>
</ng-template>
</mat-step>
</mat-horizontal-stepper>
ItemsControlComponent.html
<form [formGroup]="formgroup">
<div class="form-group row">
<div class="col-md-6 col-sm-12 offset-md-3">
<div class="col-sm-12 col-md-12 offset-md-1">
<div class="col-sm-10 nopadding">
<button mat-button [disabled] (click)="goForward()" class="btn btn-primary"> Next
</button>
</div>
</div>
</div>
</div>
</form>
ItemsControlComponent.ts
export class ItemsControlComponent implements OnInit {
@Input()
public matStepper: MatStepper;
constructor() {
}
ngOnInit() {
}
goForward() {
debugger;
if (this.formgroup.valid === true) {
this.matStepper.next();
}
}
}