How to use an ion-button with a mat-stepper

Question

I am using ionic, angular 8, and @angular/material/stepper

I have styling already applied to the ion-button tag (provided by a purchased component library). I would like to use this stying with for the next button within the map-stepper.

However if I switch the (working) button from

<button mat-button margin-top matStepperNext shape="round" button-round fill="outline">{{config.nextButton}}</button>

to

<ion-button mat-button margin-top matStepperNext shape="round" button-round fill="outline">{{config.nextButton}}</ion-button>

The no longer functions to advance the stepper. Is there a simple way to apply the matStepperNext directive to the ion-button tag?

Answer 1

I have just encountered this problem, and here what i found:

In the source code of the @angular/material/stepper/stepper-button directive the selector for the directive is button[matStepperNext] (for the "Next" button). So we can not simply use ion-button and expect it to advance or move back the stepper when clicked: the selector doesn't match.

Source: https://github.com/angular/components/blob/70ff528785cb9abe9f102f19b1ea87caef56a295/src/material/stepper/stepper-button.ts#L14

So let's say I have a stepper called "myStepperInstance", to move forward with my project, I'm thinking about creating a listener that executes myStepperInstance.next() or myStepperInstance.previous() when we click on an ion-button.