Angular – mat-step onclick event function

angularangular-materialtypescript

wondering if it is possible to have a click event for the mat-step button. For each mat-step button, I would like to add a (click) event which calls a method. In other words, the mat-step button acts like a regular button.

This is the mat-step:
https://material.angular.io/components/stepper/overview

This is my code:

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

I get this error:

Template parse errors:
Event binding click not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("eateView()" >Output–>

Best Answer

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

Related Topic