How to make a call on click of 'Next' and decide to progress or not using CDKStepper?

Question

I would like to programmatically move to the next step in I have a button bar component with the steppers controls:

<button id="cancel"
                *ngIf="showCancelButton"
                (click)="cancelWasClicked()">
          Cancel
</button>
<button id="previous"
                *ngIf="showPreviousButton"
                (click)="previousWasClicked()" matStepperPrevious>
          Previous
</button>
<button id="next"
                *ngIf="showNextButton"
                (click)="nextWasClicked()" matStepperNext>
          Next
</button>

When I click the next button, I want to trigger some external validations which the result will manage if moving to the next step is what we want.

From the documentation, there is a next method but not sure where this method is available if I have a setup like this:

<mat-step>
   <someComponent></someComponent>
   <button-bar-component></button-bar-component> <!-- Contains the stepper buttons>
</mat-step>
<mat-step>
   <someOtherComponent></someOtherComponent>
   <button-bar-component></button-bar-component> <!-- Contains the stepper buttons>
</mat-step>
etc..

I saw a similar question here: Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

Issue with this is I do not have access to the id of the stepper within my button bar. Can I pass the ID as an input somehow and call stepper.next?

Answer 1

Solved my problem by passing my "stepper" as an input into the button bar component. This gave the button bar component access to the stepper API so I can do other logic on the button click.