How to prevent event on Angular Material stepper

Question

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

Jgascona Jgascona · Accepted Answer · 2020-01-15T08:25:43

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

How to prevent event on Angular Material stepper

1 Answers