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