CODEWITHSUNDEEP
angulartypescriptangular-material
dataviews
dataviews

Reputation: 3090

mat-step onclick event function

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-->

Upvotes: 13

Views: 35186

Answers (6)

Abdullah
Abdullah

Reputation: 2933

Event emitted when the selected step has changed.

@Output()
selectionChange: EventEmitter<StepperSelectionEvent>

API reference for Angular CDK stepper

Upvotes: 1

Terry Windwalker
Terry Windwalker

Reputation: 1888

For those who also want to add click event listener to the stepper even if user click the current step (which won't trigger selectionChange event):

    ngAfterViewInit() {
        console.log('ngAfterViewInit is triggered');
        this.fadeOut = false;
        let elements = document.querySelectorAll('mat-step-header');
        console.log('elements: ', elements);
        if (elements) {
            elements.forEach((e, i) => {
                console.log('e', i, ': ', e);
                if (i === 0) {
                    this.ele0 = e;
                    this.click0 = e.addEventListener('click', () => this.function(i));
                }
                else if (i === 1) {
                    this.ele1 = e;
                    this.click1 = e.addEventListener('click', () => this.function(i));
                }
                else if (i === 2) {
                    this.ele2 = e;
                    this.click2 = e.addEventListener('click', () => this.function(i));
                }
            })
        }
    }

If you don't want to assign each listener to a unique value, you can just remove the if condition. But it is recommended as you can remove those listeners on destroy.

Upvotes: 2

Crimson_Hawk
Crimson_Hawk

Reputation: 153

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!

Upvotes: 4

aj_shela
aj_shela

Reputation: 377

(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
      }
   }
}

Upvotes: 0

Patrick Steger
Patrick Steger

Reputation: 280

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

Upvotes: 23

Karnan Muthukumar
Karnan Muthukumar

Reputation: 1863

Just for a suggestion try this instead of ng-template use div or span The event is firing I think. Let try this once and let me know.

The error tells something like that ng-template not firing as a event.

<mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

Here is an example Iam copied from you send link. Let try this button

Upvotes: -3

Related Questions