Angular Material Stepper

In this lecture we're going to talk about another layout component which is angular material stepper, steppers basically can make progress through numbered steps.

Let's take a look at an example first step import MatStepperModule from @angular/material in material.module.ts and add it to the MaterialComponents[] array.

import { MatStepperModule } from '@angular/material';

MaterialComponents = [
    MatStepperModule
]

Now we can create our stepper in the HTML there are two types of steppers horizontal and vertical.

Angular Material: Horizontal Stepper

To create a horizontal stepper we use the mat-horizontal-stepper component within this component to specify the individual steps we use the mat-step component for each step we specify the label using the label attribute and the content goes in between opening and closing tags let's create 3 steps we can all relate to, that is the checkout process of an e-commerce site.

<mat-horizontal-stepper>
  <mat-step label="Shiping Adress">
    <p>Shipping Address Details</p>
  </mat-step>
  <mat-step label="Billing Adress">
    <p>Billing Address Details</p>
  </mat-step>
  <mat-step label="Placing Order">
    <p>Order Details</p>
  </mat-step>
</mat-horizontal-stepper>

If you now save the file and take a look at the browser you should be able to see the horizontal stepper, we have 3 steps. angular material Horizontal Stepper Each step has a label and a numeric value indicating the step, you can click on the label to navigate to the particular step once you navigate away though the icon changes from the numeric value to the edit icon, so the stepper gives the idea of your process through the checkout process.

Right now we are navigating between the different steps by clicking on the label however angular material stepper also support a previous and next buttons out of the box.

All you have to do is include the mat-stepper-previous and mat-stepper-next directives, so for the Billing Address step let's add both these buttons.

<mat-horizontal-stepper>
  <mat-step label="Shiping Adress">
    <p>Shipping Adress Details</p>
  </mat-step>
  <mat-step label="Billing Adress">
    <p>Billing Adress Details</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Placing Order">
    <p>Order Details</p>
  </mat-step>
</mat-horizontal-stepper>

matStepperPrevious matStepperNext As you can see in the browser there are two buttons under Billing Address step, if you click on back button you go back one step and if you click on next button you go forward one step.

Angular Material: Linear Steps

if you've noticed we can jump from step 1 to step 2 and then to step 3 without any restrictions, in certain situation though you wan the user to complete a step before he can proceed with a subsequent steps.

Linear steppers are meant exactly for that to convert a regular stepper into a linear stepper there are two steps:

First Step: add the linear attribute to the <mat-horizontal-stepper linear> component. Second Step: add a completed attribute to the individual steps, for example to each step I'll add a completed attribute and set it to false:

<mat-horizontal-stepper linear>
  <mat-step label="Shiping Adress" completed="false">
    <p>Shipping Adress Details</p>
  </mat-step>
  <mat-step label="Billing Adress" completed="false">
    <p>Billing Adress Details</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Placing Order" completed="false">
    <p>Order Details</p>
  </mat-step>
</mat-horizontal-stepper>

If you now go back to the browser I click on the second step and you can see that we're not navigated to that step because step 1 is not completed and hence we can not proceed. If I change step 1 completed to true completed="true" you can see that now we can proceed to step 2 and since step 2 is not completed we can not proceed to step 3.

For this example I'm hard-coding completed to true or false but ideally you need to have property binding with this completed property based on your requirements after the user interacts with the step call a method that will update the completed property to true which will then allow the user to navigate to the next step.

Angular Material: Optional Step

If at all you have a step is optional you can simply place the optional attribute on that particular step, on step 2 I will add the attribute optional.

<mat-horizontal-stepper linear>
  <mat-step label="Shiping Adress" completed="true">
    <p>Shipping Adress Details</p>
  </mat-step>
  <mat-step label="Billing Adress" completed="false" optional>
    <p>Billing Adress Details</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Placing Order" completed="false">
    <p>Order Details</p>
  </mat-step>
</mat-horizontal-stepper>

mat-stepper optional You can see that you can navigate all the way to step 3 even though we have completed attribute set to false in step 2, you can also see the Optional text being displayed for Billing Address.

Angular Material: Vertical Stepper

We've see a horizontal stepper in details above, you can also create vertical stepper with angular material.

Simply change <mat-horizontal-stepper> component to <mat-vertical-stepper>.

<mat-vertical-stepper linear>
  <mat-step label="Shiping Adress" completed="true">
    <p>Shipping Adress Details</p>
  </mat-step>
  <mat-step label="Billing Adress" completed="false" optional>
    <p>Billing Adress Details</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Placing Order" completed="false">
    <p>Order Details</p>
  </mat-step>
</mat-vertical-stepper>

mat-vertical-stepper

You can see that we have the exact same stepper but this time with vertical orientation.

Well that is about angular material stepper.