Click function for mat-step event handler

Question

Click function for mat-step event handler

Is it feasible to create a click event for the mat-step button? I want to be able to add a (click) event for each mat-step button that triggers a method. Essentially, I am looking to make the mat-step button function like a regular button.

You can find more information about mat-step here: https://material.angular.io/components/stepper/overview

Below is the code snippet I have tried:

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

However, when I run this code, I encounter the following 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-->

angular typescript angular-material

Answer 1

Answer №1

Recently, I encountered a similar issue and found a quick fix by wrapping the step label's content in a p tag and adding the click event there. Here is an example of how you can implement it:

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

Another approach is to utilize the selectionChange event in the parent stepper component for more flexibility and control:

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

You can find more information about the properties of the event emitted by visiting: https://material.angular.io/cdk/stepper/api#StepperSelectionEvent

Answer 2

Recently, I encountered a similar issue and found a quick fix by wrapping the step label's content in a p tag and adding the click event there. Here is an example of how you can implement it:

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

Another approach is to utilize the selectionChange event in the parent stepper component for more flexibility and control:

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

You can find more information about the properties of the event emitted by visiting: https://material.angular.io/cdk/stepper/api#StepperSelectionEvent

Answer 3

Answer №2

Discovering what to do after a Step event can be challenging. If you find yourself in this situation, follow these steps.

Include (animationDone)

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

This action will trigger once the step is completed, providing you with the index of the new step you have reached!

Answer 4

Discovering what to do after a Step event can be challenging. If you find yourself in this situation, follow these steps.

Include (animationDone)

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

This action will trigger once the step is completed, providing you with the index of the new step you have reached!

Answer 5

Answer №3

For those looking to add a click event listener to the stepper, even if the user clicks on the current step (which won't trigger the 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 prefer not assigning each listener to a unique value, you can remove the if condition. However, it is recommended so that you can easily remove those listeners during destroy.

Answer 6

For those looking to add a click event listener to the stepper, even if the user clicks on the current step (which won't trigger the 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 prefer not assigning each listener to a unique value, you can remove the if condition. However, it is recommended so that you can easily remove those listeners during destroy.

Answer 7

Answer №4

The (selectionChange) event is triggered after the stepper change, but I want to call a function before selectionChange.

The code below is working for me. You can try this, it will work for the entire mat-step button (due to custom CSS, you can also add CSS for the span element).

.mat-step-custom-click {
    top: 0;
    left: 0;
    width: 130px; // adjust as needed
    height: 72px; // adjust as needed
    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
      }
   }
}

Answer 8

The (selectionChange) event is triggered after the stepper change, but I want to call a function before selectionChange.

The code below is working for me. You can try this, it will work for the entire mat-step button (due to custom CSS, you can also add CSS for the span element).

.mat-step-custom-click {
    top: 0;
    left: 0;
    width: 130px; // adjust as needed
    height: 72px; // adjust as needed
    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
      }
   }
}

Answer 9

Answer №5

Alert triggered when there is a change in the current selected step.

@Output()
selectionChange: EventEmitter<StepperSelectionEvent>

Check out the Angular CDK stepper API reference

Code: View Stackblitz Example
Demo: Interactive Output

Answer 10

Alert triggered when there is a change in the current selected step.

@Output()
selectionChange: EventEmitter<StepperSelectionEvent>

Check out the Angular CDK stepper API reference

Code: View Stackblitz Example
Demo: Interactive Output

Answer 11

Answer №6

Why not give this a go instead of using ng-template, try using div or span. It seems like the event is triggering. Give it a shot and inform me.

The error seems to indicate that ng-template is not firing as an 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 I copied from the link you sent. Give this button a try.

Answer 12

Why not give this a go instead of using ng-template, try using div or span. It seems like the event is triggering. Give it a shot and inform me.

The error seems to indicate that ng-template is not firing as an 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 I copied from the link you sent. Give this button a try.

Click function for mat-step event handler

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

When working with Angular/Typescript, the error message "compilation of 'export const' is not possible

Troubleshooting the issue of process.nextTick not being recognized in Calgolia places.js

React error: The DatePickerProps generic type must have one type argument specified

The 'Access-Control-Allow-Origin' header can be found on the resource that was requested

The 'setState' property is not found on the 'Window' type

The functionality of the Angular application is not compatible with Edge browser

Error: Uncaught TypeError in AuthContext in Next.js 13.0.6 when using TypeScript and Firebase integration

Having difficulty implementing canDeactivate or canActivate in Angular

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

MasterNG - Submitting form details and uploading files with a button press

Struggling with sluggish performance on a certain project within VS Code

Guide to displaying a section of Component A within Component B

Leverage Sinon's fakeServer in combination with promises and mocha for efficient

Can you explain how to invoke a class with express().use function?

Steps for importing a CommonJS module that exports as a callable into TypeScript

Steps for launching Angular 5 application using Node.js server

Unexpected behavior with the ion-datetime time picker on an Android device

Exclude the initial argument from functions listed within a JSON structure

Encountering an Error: ExpressionChangedAfterItHasBeenCheckedError, whilst conditionally modifying an attribute of

Ways to fix the perpetual cycle in adal-angular4 following authentication redirect