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

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

Faisal

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to move stepper from one step to second step using angular and angular material

Angular material 2 stepper - next step

How to customize colors in Material UI Stepper Step?

How to reset a 'Material Angular Stepper' Step?

how to make active previous all steps of selectedIndex step using angular material stepper and angular 6

is there an option to change icon for completed step in material-2 stepper

how to change angular stepper progress color when next step active

How to change color in Stepper according to active and completed Step

How to change angular material stepper step numbers to any icon or text?

How to change color of angular material stepper step icons

Angular - How to Validate each step in Angular Material stepper

How to stop user moving to next step until finish the current step using Angular Material Stepper(Angular 4)

Material UI - Button inside stepper step

Angular Material Stepper Component For Each Step

Angular - Material Stepper Skips one step on Next Step Click

Set active for adding step by step in vuejs?

How to validate each form Step in Stepper

How to reset to step one Angular stepper CDK?

How to display a list in a step of stepper in FLUTTER

mat-horizontal-stepper not accepting style for the active step

Allocating full width for the one step in the Angular Material stepper

Using the ChangeDetectorRef to detect component state changes in order to step with the material stepper?

Angular Material Stepper with Separate Component for each step - ExpressionChangedAfterItHasBeenCheckedError

different component for each angular material stepper step via *ngFor

angular material stepper add new step items dynamically on every click

Get step index from Angular Material Design Stepper

Keep the pervious step open Vertical Stepper Material-UI

How to set material stepper to open second item by default and set the icon color?(Angular Material)

In Flutter' Stepper, how to put the title of the Step below the counter?