mat-step onclick event function

So, I just ran into this problem and the easy fix is to wrap the actual content of the step label in a p tag and add the click event there. For your example, it'd be:

<mat-step>  <ng-template matStepLabel>    <p (click)="createView()">Output</p>  </ng-template></mat-step>

Alternatively, and much more powerfully, you can hook into the selectionChange event in the parent stepper component like so:

<mat-horizontal-stepper (selectionChange)="selectionChange($event)">

The event emitted has the following properties: https://material.angular.io/cdk/stepper/api#StepperSelectionEvent

After Step event. This was painful for me to figure out. When you land on the new step and you want to fire an event. Do the following.

Add (animationDone)

<mat-horizontal-stepper linear #stepper (animationDone)="selectionChange(stepper)">

This will fire after the step is finished. And will give you the index of the new step you are on!

(selectionChange) event triggered after stepper change, want to call function before selectionChange.

Below code working for me, Try this it will work for entire mat-step button (because of custom css, you can add css for span too).

.mat-step-custom-click {    top: 0;    left: 0;    width: 130px; // as per your need    height: 72px; // as per your need    position: absolute;    display: flex;    align-items: center;    justify-content: center;}<mat-step>    <ng-template matStepLabel>        <div class="mat-step-custom-click" (click)="justTesting()">            <span>YOUR LABEL</span>        </div>    </ng-template></mat-step>justTesting(){   if( stepper.selectedIndex ){ // you can check stepper index      let isValid = this.CheckValidations(yourData); // check your validations      stepper.selected.completed = isValid;      if( isValid ){       doSomething(); // call your function      }   }}