How to add click on mat label in mat stepper

Question

I need a click functionality on matSteplabel. Added click on mat-step also but no use!

                  <ng-template (click)="myFunc()" matStepLabel>

                    Snapshot

                  </ng-template>
                  <!-- Start All Backup Data Step1 Data -->

                       <!--app-compare-data-step1></app-compare-data-step1-->

                  <!-- End All Backup Data Step1 Data -->


                </mat-step>
</mat-horizontal-stepper>

You need to add your full code sample, this doesn't look like it should compile currently. — Michael Tempest, Jan 30 '18 at 12:23

score 3 · Answer 1 · answered Jan 30 '18 at 12:26

You are using the ng-template wrong. Ng-template is just a wrapper and it's the content of it that will be appended to the element referencing it.

Whatever you define on ng-template tag accept for the name will be lost. So you have to define your click somewhere inside the ng-template's body and not on the tag itself.

score -1 · Answer 2 · answered Jan 30 '18 at 12:32

-1

As Miroslav mentioned you can use something like this:

<ng-template matStepLabel>

               <p (click)="myFunc()">Snapshot</P>

</ng-template>

answered Jan 30 '18 at 12:32

Krishna Mohan

1,612
3
19
27

I am still looking for a way to have a click on mat-step-header. If I attach a click handler to a
element inside ng-template , only works if I click on
but I cannot make
fill all the space of the container. I am using mat-vertical-stepper
– Gringo May 01 '19 at 15:47
Try some css. https://stackoverflow.com/questions/6874402/remove-space-above-and-below-p-tag-html – Krishna Mohan May 02 '19 at 12:11
@Gringo check this out: https://stackoverflow.com/a/61910602/8662476 – Maurici Abad May 20 '20 at 10:18

How to add click on mat label in mat stepper

2 Answers2