directivas - set value input angular 2

Angular 4 y material paso a paso

Question

¿Es posible restablecer (o simplemente saltar al primer paso) dentro de un stepper a stepper ? No está documentado en los documentos, pero ¿es posible hacerlo? En los documentos se indica que el paso a paso se basa en "Paso a paso de CDK" ( link ?), Pero no puedo encontrar ningún ejemplo que me lleve a mi objetivo.

Answer 1

Es posible saltar a un paso a paso específico. MatStepper expone una propiedad pública selectedIndex que especifica el índice de pasos actualmente seleccionado. Se puede configurar. El índice comienza en 0.

En su plantilla:

Agregue una identificación a su paso a paso, por ejemplo, #stepper paso Luego, agregue un botón en su paso y pase la ID de paso a paso en una función (click) como a continuación:

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

.. y en su escritura:

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

exported YourOwnComponent {

  constructor() {}

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

Demo de Stackblitz

Answer 2

Ok, parece que encontré una solución (pero no se indica en ninguna parte de la API).

1. Agregue una referencia al paso a paso, luego agregue ViewChild con la referencia en su archivo de ViewChild componente.
2. Crea un método para cambiar el índice del paso a paso.

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