web-dev-qa-db-fra.com

Angular 4 & matériau pas à pas

Est-il possible de réinitialiser (ou simplement de sauter à la première étape) à l'intérieur d'un stepper ? Ce n'est pas documenté dans la documentation, mais est-il possible de le faire? Il est indiqué dans la documentation que le moteur pas à pas est construit sur "CDK Stepper" ( lien ?), Mais je ne trouve aucun exemple qui me conduise à mon objectif.

angularangular-materialangular-material2
21
Ben jamin

Ok, il semble que j'ai trouvé une solution (mais ce n'est pas indiqué nulle part dans l'API).

  1. Ajoutez une référence au stepper, puis ajoutez ViewChild avec la référence dans votre fichier TypeScript.
  2. Créez une méthode pour changer l'index du stepper.

HTML:

<mat-horizontal-stepper [linear]="true" #stepper>
    <!-- Content here -->
</mat-horizontal-stepper>

TS:

import { Component, ViewChild } from '@angular/core';
@Component({
    // ...
})
export class AppComponent {
    @ViewChild('stepper') stepper;

    /**
     * Changes the step to the index specified
     * @param {number} index The index of the step
     */
    changeStep(index: number) {
        this.stepper.selectedIndex = index;
    }
}
39
Ben jamin

Il est possible de sauter à un stepper spécifique. MatStepper expose une propriété publique selectedIndex qui spécifie l'index de pas actuellement sélectionné. Il peut être réglé. L'index commence à 0.

Dans votre modèle:

Ajoutez un identifiant à votre stepper, par exemple. #stepper _ . Ajoutez ensuite un bouton dans votre étape et transmettez l’identifiant stepper dans une fonction sur (click) comme ci-dessous:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <!-- Your other steps here -->
    <mat-step [stepControl]="secondFormGroup">
        <!-- Content in the step -->
        <div>
            <!-- Other actions here -->                 
            <button mat-button (click)="resetStepper(stepper)">Reset</button>
        </div>
    </mat-step>
    <!-- More steps here -->
</mat-horizontal-stepper>

.. et dans votre TypeScript: 

import { MatStepper } from '@angular/material';

exported YourOwnComponent {

  constructor() {}

  resetStepper(stepper: MatStepper){
     stepper.selectedIndex = 0;
  }
}

démonstration de Stackblitz

14
Faisal