¿Puedo mover programáticamente los pasos de un mat-horizontal-stepper en Angular / Angular Material?

Alana, parte de este staff, nos hizo el favor de redactar esta crónica porque controla perfectamente este tema.

Solución:

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

En tu plantilla:

Agregue una identificación a su paso a paso, por ejemplo #stepper. Entonces en tu goBack() y goForward() métodos, pase la identificación paso a paso:

    
    


   Back
   Next

.. y en su texto mecanografiado:

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

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


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

Enlace a demostración de stackblitz.

---

También puedes usar ViewChild para obtener una referencia al componente paso a paso en su TypeScript como se muestra a continuación:

@ViewChild('stepper') private myStepper: MatStepper;

goBack()
    this.myStepper.previous();


goForward()
    this.myStepper.next();

En este caso, no tiene que pasar la referencia paso a paso en el método en el html de su componente. Enlace a Demostración con ViewChild

---

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

Back
Next

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

Esto es útil cuando necesita más flexibilidad en la manipulación del paso a paso, por ejemplo, desde un Service o algo mas.

HTML:

  1st
  2nd
  3rd
  4th

Archivo TS:

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

Aquí esta la demostración de stackblitz.

Si tu quiero navegar programáticamente al siguiente paso y si estás utilizando un paso a paso linealsiga los siguientes pasos:

• Crear un stepper Me gusta esto:

• Definir mat-step Me gusta esto:

• Desde adentro mat-step cree un botón para ir al siguiente paso como este: NEXT STEP

• En .ts declarar un archivo MatStepper referencia nombrada paso a paso :
  @ViewChild('matHorizontalStepper') stepper: MatStepper;

• También, dentro .ts inicializar archivo isThisStepDone como false : isThisStepDone: boolean = false;

• Luego escribe el método para PRÓXIMO PASO botón llamado next():

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

Nota la parte asíncrona (setTimeout()) es requerido debido a la propagación del estado a través de isThisStepDone.

Aquí puedes ver las reseñas y valoraciones de los lectores

Puedes añadir valor a nuestra información asistiendo con tu veteranía en las explicaciones.

---

---

Utiliza Nuestro Buscador