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?
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.
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.