Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 369
Aranganathan Avatar asked Oct 16 '17 14:10

Aranganathan


People also ask

What is stepControl in Mat stepper?

For each mat-step , the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step. There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step.

How many stepper types do we have in general?

There are three main types of stepper motors: Permanent magnet stepper. Variable reluctance stepper. Hybrid synchronous stepper.


3 Answers

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.

like image 61
Faisal Avatar answered Sep 28 '22 03:09

Faisal


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.

like image 44
Alec Gerona Avatar answered Sep 28 '22 03:09

Alec Gerona


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)

like image 22
Parth kharecha Avatar answered Sep 28 '22 03:09

Parth kharecha