Reputation: 1259
I am using material stepper on a Angular 8 project. I need to attach a button to each step, but I don't want to change the step each time the user clicks the button. So, how can I disable the stepper navigation only when click the button within? Thank you all in advance.
Live example: https://stackblitz.com/edit/angular-hyrcdf-vmo5nm
Upvotes: 0
Views: 1835
Reputation: 1259
Finnaly solved!
I implemented the event.stopPropagation()
on the function binded to stepper buttons.
Template:
<ng-template matStepLabel>Fill out your address
<div class="status-icon" (click)="clickButton($event)">
<button>Do something 2</button>
</div>
</ng-template>
Component:
clickButton(event: any) {
event.stopPropagation();
console.log('You clicked on a button');
}
Stackblitz with full example: https://stackblitz.com/edit/angular-hyrcdf-vmo5nm
Upvotes: 2