How to bind an click event for mat-step-header

问题

I want to trigger a function when user clicks on mat-step-header

I've tried adding (click) on <ng-template matStepLabel><span (click)="triggerClick()">step 1</span></ng-template> but it's triggering only on the click of label which will not be helpful for my case.

I want to trigger a function when user click on any of the mat-step-header if it returns the index of clicked step it will be helpful.

回答1:

From the docs it doesn't look like there's a direct way to do this. The only eventEmitter that could help you would be selectionChange(). We can use this along with a (click) event to get the selectedIndex on click.

We can use selectionChange() to get the index of the selected tab. As per the docs

selectionChange() is the event emitted when the selected step has changed

In your HTML

<mat-horizontal-stepper #stepper (selectionChange)="setIndex($event)" (click)="triggerClick()">
  <!-- Add your steppers here -->
</mat-horizontal-stepper>

and in your component

// Set default tab value to index so you don't get undefined if user clicks default tab initially
selectedIndex: number = 0;

setIndex(event) {
  this.selectedIndex = event.selectedIndex;
}

triggerClick(event) {
  console.log(`Selected tab index: ${this.selectedIndex}`);
}

Here is a working example on StackBlitz.

回答2:

You can add (click) on the mat-step-header for sure

<mat-step-header  class="mat-vertical-stepper-header"(click)="step.select()"

回答3:

(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).

you have to write this for every mat-step if you want to call function on each mat-step.

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

回答4:

In your component.ts:

@ViewChild('stepper', {static: false})
stepper: MatStepper;

constructor(
  private elementRef: ElementRef,
) {}

ngAfterViewInit() {
  this.elementRef.nativeElement.querySelectorAll('mat-step-header').forEach(item => {
    item.addEventListener('click', event => {
      const index = event.currentTarget.ariaPosInSet - 1;

     });
  });
}

I know it's not elegant, but it works. Any improvements are welcome.

来源：https://stackoverflow.com/questions/57429466/how-to-bind-an-click-event-for-mat-step-header

标签

angular

angular-material