154

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>

8 Answers 8

285

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>
10
  • 12
    I was just looking at ViewChild and seeing how I could reference the Stepper - but you have beaten me to it! Love the fact you added the disable / enable functionality too! Have some points!
    – Mike Sav
    Commented Sep 28, 2017 at 13:03
  • 1
    ViewChild is also a good option to get the stepper. But I would prefer passing an id. I have also added ViewChild solution in the demo \o/
    – FAISAL
    Commented Sep 28, 2017 at 13:08
  • Hi Faisal thanks for such a great answer ,one more help, instead of passing a form to mat-step can we pass angular components and then depending upon that component being valid can I traverse to the next mat-step, how that can be achieved, thankyou
    – Enthu
    Commented Nov 15, 2017 at 12:14
  • Nice solution. But how could we restrict the scrolling area to just the content of the stepper and not the actual header. If you add heaps of content, then the header will scroll out of sight. Since the header gives an indication of where the user is in some process, then it's important that the header is visible regardless of the amount of content in each step. Commented Aug 8, 2018 at 4:12
  • 1
    If you are using Angular 8, and using @ViewChild, you should use static: false @ViewChild('stepper', {static: false}) private myStepper: MatStepper; Per Angular, this value will default to false in Angular 9+ link
    – rorvis
    Commented Dec 9, 2020 at 17:27
50

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.

2
  • 1
    Is it possible when using mat-horizontal-stepper linear="true"? Commented May 31, 2022 at 10:44
  • no, see other answers with .next() Commented Mar 3 at 13:43
34

If you want to navigate programmatically to next step and if you are using a linear stepper, follow the below steps:

  • Create a stepper like this: <mat-horizontal-stepper linear #matHorizontalStepper>

  • Define mat-step like this: <mat-step [completed]="isThisStepDone">

  • From inside mat-step create a button to go to next step like this: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>

  • In .ts file declare a MatStepper reference named stepper :
    @ViewChild('matHorizontalStepper') stepper: MatStepper;

  • Also, within .ts file initialize isThisStepDone as false : isThisStepDone: boolean = false;

  • Then write method for NEXT STEP button named next():

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

NOTE: The async part (setTimeout()) is required due to state propagation via isThisStepDone.

4
  • 7
    The async part (setTimeout()) is required due to state propagation via isThisStepDone.
    – Yuri
    Commented Dec 31, 2018 at 9:41
  • 1
    Thnks bruh, this was the one I was looking for.. For linear stepper. Commented Feb 4, 2021 at 11:55
  • The method in your example code is named wrong. Should be "next", not "submit".
    – Todd
    Commented Apr 20, 2022 at 3:08
  • Is there a way to use the completed state of the current step to disable/enable the button? Commented Aug 18, 2022 at 7:33
6

If you are inside of child components, you can inject the stepper.

MyMainPageWithStepper.html (simplified)

<mat-horizontal-stepper>
  <mat-step label="Upload">
    <my-component></my-component>
  </mat-step>
</mat-horizontal-stepper>

MyComponent.ts

constructor(private readonly _stepper: CdkStepper}{}

someFunction(): void {
   this._stepper.next();
}
3

You could also do it by specifying the actual index of the stepper using selectedIndex.

stackblitz: https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts

HTML:

<div class="fab-nav-container">
   <mat-vertical-stepper linear="false" #stepper>
       <mat-step *ngFor="let step of stepNodes; let i = index">
           <ng-template matStepLabel>
               <p> {{step.title}} </p>
           </ng-template>
       </mat-step>
   </mat-vertical-stepper>
</div>

<div class="button-container">
   <div class="button-grp">
      <button mat-stroked-button (click)="clickButton(1, stepper)">1</button>
      <button mat-stroked-button (click)="clickButton(2, stepper)">2</button>
      <button mat-stroked-button (click)="clickButton(3, stepper)">3</button>
   </div>
</div>

TS:

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatVerticalStepper } from '@angular/material';
import { MatStepper } from '@angular/material';
export interface INodes {
    title: string;
    seq: number;
    flowId: string;
}
/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.scss'],
})
export class StepperOverviewExample implements OnInit {
  @ViewChild(MatVerticalStepper) vert_stepper: MatVerticalStepper;
  @ViewChild('stepper') private myStepper: MatStepper;

  stepNodes: INodes[] = [
    { title: 'Request Submission', seq: 1, flowId: 'xasd12'}, 
    { title: 'Department Approval', seq: 2, flowId: 'erda23'}, 
    { title: 'Requestor Confirmation', seq: 3, flowId: 'fsyq51'}, 
  ];

  ngOnInit() {
  }
  ngAfterViewInit() {
    this.vert_stepper._getIndicatorType = () => 'number';
  }
  clickButton(index: number, stepper: MatStepper) {
      stepper.selectedIndex = index - 1;
  }
}
1
  • 1
    I am just useing @ViewChild('stepper') private myStepper: MatStepper; and than this.matStepper.next(); in my function. Working perfectly
    – Max
    Commented Apr 16, 2019 at 15:28
2

you can use a ViewChild on MatStepper

in HTML file:

<mat-horizontal-stepper #stepper class="transactions-stepper">
    <mat-step></mat-step>
</mat-horizontal-stepper>

and defined next and previous method on ts file

in TS file:

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

nextStep(): void {
   this.stepper.next();
}

previousStep(): void {
   this.stepper.previous();
}

also you can pass viewChild for stepper by input on component for next or previous on your child components

like:

<transactions-list #transactionsList [stepper]="stepper"></transactions-list>
1

The solution I implemented allows previous step validations (it fills the validation dots):

  ngAfterViewInit() {
        if(this.isDone) {
          this.stepper.selectedIndex = 0;
          this.stepper.linear = false;
    
          // remove the validation // which makes the next call to the next method validate the step. warning => the validation should be readded.
          this.firstFormGroup = this._formBuilder.group({
            email: ['',],
            password:['',]
          });
    
          this.stepper.next();
          
          this.secondFormGroup = this._formBuilder.group({
            pricingYear: ['',],
            pricingMontly: ['',],
          });
          this.stepper.next();
    
          setTimeout(() => {
            this.stepper.linear = true;
         });
        }
      }
0

There is another solution if you want to know what step is currently selected and to only move to another step if the user is not there.

Set an id to the mat-step

<mat-stepper #stepper>
 <mat-step id='product'></mat-step>
 <mat-step id='date'></mat-step>
 <mat-step id='info'></mat-step>
</mat-stepper>

Now in the component if we want to go to the "date" step we can do something like this:

  @ViewChild('stepper') stepper: MatStepper;
  goToDate() {
   const firstStepId = this.stepper.steps?.first?.content?.elementRef?.nativeElement?.parentElement?.id;
      if (firstStepId === 'product' && this.stepper.selectedIndex === 0) {
        this.stepper.next();
      }
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.