To handle the selection change event for the parent tag, which is mat-horizontal-stepper, you can utilize the (selectionChange) event.
HTML:
<mat-horizontal-stepper linear (selectionChange)="selectionChange($event)">
<mat-step label="Step 1" [completed]="step1Complete">
<h4>Step 1</h4>
<button (click)="toggleStep1Complete()" mat-flat-button color="primary">{{ step1Complete === true ? "Toggle:Complete" : "Toggle:Incomplete"}}
</button>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 2" optional>
<p>Step 2</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 3">
<p>Step 3</p>
</mat-step>
</mat-horizontal-stepper>
TS Code:
import { StepperSelectionEvent } from '@angular/cdk/stepper'; -- It's recommended to use this import for better intellisense
selectionChange(event: StepperSelectionEvent) {
console.log(event.selectedStep.label);
let stepLabel = event.selectedStep.label;
if (stepLabel == "Step 2") {
console.log("CLICKED STEP 2");
}
}
Check out a working demo here
EDIT:
If you want every step to be clickable or available to the user, consider removing the linear attribute from the mat-horizontal-stepper element or setting it to false.
View Documentation for More Details