Angular Material 8 | Stepper Tutorial with Examples

In many applications which includes large forms to take data submission, it is very important to keep the user interface simple and clean for visitors to understand. The best way is to take data from users in steps.

We can divide data into multiple groups and take these input from the user in a step by step formats. This type of data submission is done with the help of Stepper.

For example, during the creation of an Employee profile in the company, we can divide the submission form into 5 steps.

Step 1) Take user personal information.

Step 2) Designation and job location details.

Step 3) Contact information.

Step 4) Anual package breakdown details.

Step 5) Confirmation and Save!

Angular Material provides we component called Stepper using which we can easily create a Step based form. Here we will create a sample Stepper form and discuss some of its important options.

Let’s get started!
First, we will create a new Angular project using NG CLI tool in the latest version 8.1.2. Run following CLI command to create a new project

Install Angular Material

Follow the below steps to install the Material UI framework in Angular Project. After that, we will be able to use Stepper Component on Material in our project
Step 1) Install Material, CDK and Animation packages by running following NPM commands:

 

Step 2) To Enable Animations for Material components, open app.module.ts file to import BrowserAnimationsModule then add in imports array as shown below:
You can also disable animations by importing NoopAnimationsModule as follows:
Step 3) Final step is to import one of the theme files in the styles.css file:
You can also try these other available themes:
Add Material Icons: If you want to use Icons then add following CSS file in the index.html head section:

Import Stepper Module

To use Stepper, open app.module.ts file to import MatStepperModule then add in imports array:

Adding Stepper in the Template

Stepper consists of the main wrapper mat-horizontal-stepper and each step is added by using mat-step


We can also convert Horizontal to Verticle position by using mat-vertical-stepper as follows:

Step Labels

Custom Template

label property of mat-step is used to add simple text on steps, but for more complex label formats we can use templates

Label Position
 Position of the label in mat-horizontal-stepper is set to end by default, we can also set it to bottom by setting it in labelPositionproperty as follows:

 

Custom Icons

create and done Material icons are used by default, but we can override mat-icon element. Using a template with a custom icon we can change icons for edit and done.

Note: You need to import MatIconModule in the app.module.ts file to use mat-icon directive.

Stepper Buttons
For navigation to the next or previous step, we can use buttons in steps with matStepperPrevious and matStepperNext directive.

Enable Linear Stepper

By default, a user can step next without completing the details in the current step, but we can set a linear property of on mat-horizontal-stepper and mat-vertical-stepper to true so that user must complete current step to navigate to next.

stepControlproperty can be used to check the validity of the current step.

completed property can be used to set true or false manually to set is step is completed

Make Step Optional

If any step is not required, then we can set the optional attribute to true on mat-step.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of