Can a mat-checkbox be used as a matStepperNext? - checkbox

Question

I want a step within a stepper to have an agreement, but don't want the extra button that says "I agree with what I just checked to agree to". Just click on the checkbox and go.
Using the standard Angular example, I swapped out the button for a checkbox and the stepper doesn't move forward.
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Agree with Terms</ng-template>
<div>
<mat-checkbox matStepperNext formControlName="firstCtrl" required> I agree </button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-vertical-stepper>
Expect to click the checkbox and have the stepper move directly to step 2.

Answer 1

I figured it out. The key word, matStepperNext, appears to not apply to checkboxes. However, if in the checkbox HTML, where you include #stepper in your stepper's div...
<mat-vertical-stepper #stepper [linear]="isLinear">you include a (change) event calling a function...
You can add a (change) event that calls a function with that name...
<mat-checkbox matStepperNext (change)="goForward(stepper);" formControlName="firstCtrl" required> I agree </button>
Then, in the .ts, make sure to include...
import { MatStepper } from '#angular/material/stepper';
...and then add this function...
goForward(stepper: MatStepper){
stepper.next();
}
When you click the checkbox, it should progress to your next step.