CODEWITHSUNDEEP
angularangular-materialstepper
Jgascona
Jgascona

Reputation: 1259

How to prevent event on Angular Material stepper

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

Picture of the stepper

Upvotes: 0

Views: 1835

Answers (1)

Jgascona
Jgascona

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

Related Questions