examples - ¿Puedo mover de manera programática los pasos de una estera-paso-horizontal en Material Angular/Angular?

layout-align

Question

Tengo una pregunta relacionada con el material angular (con Angular 4+). Digamos que en mi plantilla de componente agrego un componente <mat-horizontal-stepper> , y dentro de cada paso <mat-step> tengo botones de pasos para navegar por el componente. Al igual que...

<mat-horizontal-stepper>
  <mat-step>
    Step 1
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 2
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 3
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
</mat-horizontal-stepper>

Ahora me pregunto si es posible quitar los botones de cada paso y tenerlos en otro lugar en el <mat-horizontal-stepper> en una posición estática o incluso fuera del <mat-horizontal-stepper> y puedo navegar hacia atrás y reenvía utilizando código dentro de mi componente de archivo de script. Para dar una idea, me gustaría que mi HTML fuera algo como esto.

<mat-horizontal-stepper>
    <mat-step>
        Step 1
    </mat-step>
    <mat-step>
        Step 2
    </mat-step>
    <mat-step>
        Step 3
    </mat-step>
    <!-- one option -->
    <div>
       <button mat-button matStepperPrevious type="button">Back</button>
       <button mat-button matStepperNext type="button">Next</button>
    </div>
</mat-horizontal-stepper>

<!-- second option -->
<div>
   <button (click)="goBack()" type="button">Back</button>
   <button (click)="goForward()" type="button">Next</button>
</div>

Answer 1

Además de la respuesta de @Faisal, esta es mi opinión sobre cómo hacer saltar el MatStepper sin tener que pasar el paso a paso en los argumentos.

Esto es útil cuando necesita más flexibilidad para manipular el paso a paso, por ejemplo, desde un Service u otra cosa.

HTML:

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
  <button (click)="move(0)">1st</button>
  <button (click)="move(1)">2nd</button>
  <button (click)="move(2)">3rd</button>
  <button (click)="move(3)">4th</button>
</div>

Archivo TS:

move(index: number) {
    this.stepper.selectedIndex = index;
}

Aquí está la demo stackblitz .

Answer 2

Sí. Es posible saltar a un paso específico usando la propiedad selectedIndex de MatStepper . Además, MatStepper expone los métodos públicos next() y previous() . Puedes usarlos para moverte de un lado a otro.

En su plantilla:

Agrega una identificación a tu paso a paso, por ejemplo, #stepper . Luego, en tus goBack() y goForward() , pasa el ID paso a paso:

<mat-horizontal-stepper #stepper>
    <!-- Steps -->
</mat-horizontal-stepper>    
<!-- second option -->
<div>
   <button (click)="goBack(stepper)" type="button">Back</button>
   <button (click)="goForward(stepper)" type="button">Next</button>
</div>

.. y en su escritura:

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

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

Enlace a la demo de stackblitz .

Puede habilitar / deshabilitar los botones Back y Next usando lo siguiente:

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>

Answer 3

Si desea navegar programáticamente al siguiente paso si está usando un paso a paso lineal , siga los pasos a continuación:

• Cree un stepper a stepper como este: <mat-horizontal-stepper linear #matHorizontalStepper>
• Defina mat-step como este: <mat-step [completed]="isThisStepDone">
• Desde el interior de mat-step cree un botón para ir al siguiente paso como este: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
• En el archivo .ts declare una referencia de MatStepper llamada stepper :
  @ViewChild(''matHorizontalStepper'') stepper: MatStepper;
• Además, dentro del archivo .ts , inicialice isThisStepDone como false : isThisStepDone: boolean = false;

• Luego escriba el método para el botón SIGUIENTE PASO llamado next() :

  submit(stepper: MatStepper) {
   this.isThisStepDone = true;
   setTimeout(() => {           // or do some API calls/ Async events
    stepper.next();
   }, 1);
  }