How to set second step as active step in Material-2 stepper?

Question

<mat-vertical-stepper>
<mat-step label="Agreement Preparation">
    <p>Agreement preparion is intiated by our side </p>
</mat-step>
<mat-step label="Ready for Biometric" selected active>
    <p>Agreement preparion is intiated by our side </p>

</mat-step>
<mat-step label="Document in Submission">
    <p>Agreement preparion is intiated by our side </p>

</mat-step>

i tried setting active and selected but it does not work.

Answer 1

Add a reference to your stepper e.g. #stepper and after the view initializes, set the selectedIndex of stepper to 1.

In your Template:

        <mat-vertical-stepper #stepper>
            <mat-step label="Agreement Preparation">
                <p>Agreement preparion is intiated by our side </p>
            </mat-step>
            <mat-step label="Ready for Biometric">
                <p>Agreement preparion is intiated by our side </p>
            </mat-step>
            <mat-step label="Document in Submission">
                <p>Agreement preparion is intiated by our side </p>
            </mat-step>
        </mat-vertical-stepper>

... and in your Typescript:

    import { ViewChild, AfterViewInit } from '@angular/core';
    import { MatStepper } from '@angular/material';
    
    Component({
        .....
    })
    export class ComponentClass implements AfterViewInit {
        @ViewChild('stepper') stepper: MatStepper;
        
        ngAfterViewInit() {
            this.stepper.selectedIndex = 1; 
        }
    }

Link to StackBlitz demo.

Answer 2

For anyone still viewing this, this is how I did it without implementing AfterViewInit.

    <div *ngIf="!processing">
        <mat-vertical-stepper linear [selectedIndex]="currentStep">
            <mat-step label="Step 1">Step 1</mat-step>
            <mat-step label="Step 2">Step 2</mat-step>
            <mat-step label="Step 3">Step 3</mat-step>
            <mat-step label="Step 4">Step 4</mat-step>
        </mat-vertical-stepper>
    </div>

My ts file:

    ngOnInit() {
        this.processing = true;
        setTimeout(() => {
          this.currentStep = 2;
          this.processing = false;
        }, 1500);
    }

This setTimeout() is used to simulate an api call that takes some time. This helps you show the stepper only when you're sure you know which index you would like to set active.

Answer 3

Use attribut selectedIndex in mat-horizontal-stepper for default

Ex:

<mat-horizontal-stepper [linear]="isLinear" #stepper selectedIndex="2">
  <mat-label></mat-label>
</mat-horizontal-stepper>

Note: start index with 0 (ZERO)