web-dev-qa-db-fra.com

Comment définir la deuxième étape comme étape active dans le stepper Material-2?

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

j'ai essayé de mettre actif et sélectionné mais cela ne fonctionne pas.

angularangular-materialangular-material2
7
Aranganathan

Ajoutez une référence à votre stepper, par ex. #stepper et une fois la vue initialisée, définissez selectedIndex de stepper sur 1.

Dans votre modèle: 

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

... et dans votre 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; 
    }
}

Lien vers Démo StackBlitz .

12
Faisal

Pour tous ceux qui consultent encore ceci, voici comment je l'ai fait sans implémenter 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>

Mon fichier ts:

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

Cette setTimeout() est utilisée pour simuler un appel API qui prend un certain temps. Cela vous permet d'afficher le stepper uniquement lorsque vous êtes sûr de savoir quel index vous souhaitez définir comme actif.

7
Altus