Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

I have a question regards Angular Material (with Angular 4+). Say in my component template I add a <mat-horizontal-stepper> component, and within each step <mat-step> I have stepper buttons to navigate the component. Like so...

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

Now I am wondering if it is possible to remove the buttons out of each step and have them elsewhere in the <mat-horizontal-stepper> in a static position or even outside the <mat-horizontal-stepper> and I can navigate backwards and forwards using code within my component typescript file. To give an idea, I would like my HTML be something like this

<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> 
like image 964
Mike Sav Avatar asked Sep 28 '17 12:09

Mike Sav


People also ask

What is stepControl in Mat stepper?

For each mat-step , the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step. There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step.

How many stepper types do we have in general?

There are three main types of stepper motors: Permanent magnet stepper. Variable reluctance stepper. Hybrid synchronous stepper.

How do I change the color of my mat stepper icon?

There does not seem to be option to change color of mat stepper icon, you can use this css as workaround. Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.


2 Answers

Yes. It is possible to jump to a specific stepper by using selectedIndex property of the MatStepper. Also, MatStepper exposes public methods next() and previous(). You can use them to move back and forth.

In your template:

Add an id to your stepper e.g. #stepper. Then in your goBack() and goForward() methods, pass the stepper id:

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

.. and in your typescript:

import { MatStepper } from '@angular/material/stepper';  goBack(stepper: MatStepper){     stepper.previous(); }  goForward(stepper: MatStepper){     stepper.next(); } 

Link to stackblitz demo.


You can also use ViewChild to get a reference to the stepper component in your TypeScript as shown below:

@ViewChild('stepper') private myStepper: MatStepper;  goBack(){     this.myStepper.previous(); }  goForward(){     this.myStepper.next(); } 

In this case, you don't have to pass the stepper reference in the method in your component's html. Link to Demo with ViewChild


You can enable/disable the Back and Next buttons by using the following:

<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> 
like image 195
Faisal Avatar answered Sep 18 '22 19:09

Faisal


In addition to @Faisal's answer, this is my take on making the MatStepper jump without needing to pass the stepper in the arguments.

This is helpful when you need more flexibility in manipulating the stepper e.g. from a Service or something else.

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> 

TS File:

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

Here's the stackblitz demo.

like image 33
Alec Gerona Avatar answered Sep 16 '22 19:09

Alec Gerona