Angular Material Stepper with Routing to components-CodePudding

I'm facing a problem I can not solve at the moment: I'm trying to build an Angular Material stepper. Each step should take the user to a different component from my project.

I wrote some functions in my .ts-file that navigate the user to a specific component when called in my .html-file. Unfortunately, this kind of click-Event is not suitable for <mat-step>, but only for elements like <p>. This means, that my routing kind of works, but only if I click on the exact text element <p> and not the "whole step-container" <mat-step>.

I'm now looking for a more elegant way to fix this problem - Thanks for every comment in advance! Take care :)

goto_component1() {
    this.route.navigate(['/component1']);
}

goto_component2() {
    this.route.navigate(['/component2']);
}

<mat-horizontal-stepper>

    <mat-step>
        <ng-template matStepLabel>
            <p (click)="goto_component1()">Component One</p>
        </ng-template>
        </mat-step>
    <mat-step>
        <ng-template matStepLabel>
            <p (click)="goto_component2()">Component Two</p>
        </ng-template>
    </mat-step>
    
</mat-horizontal-stepper>

CodePudding user response：

use selectionChange event to detect the tab change, and used the index to find which tab is clicked

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

</mat-horizontal-stepper>

you'll get selectedIndex from the $event , you can use that to find the clicked tab