Member-only story
Software Engineering
Build a Reusable Stepper as an Angular Library
Convey your process’s progress with a dynamic stepper
Flight booking, managing an invoice in SAP, creating a purchase order — what all of these processes have in common is the fact that they involve many steps to finish them. A purchase order, for example, consists of several compliance checkpoints, approval, and input tasks to ensure timely processing.
If you got the chance to build an enterprise application that handles similar processes, this means that multiple modules in your app should include the same user interface logic and you have to solve the same problem in many places.
You got it! You need to implement a customizable reusable component that conveys the process’s progress and allows the data submission step by step, and that’s what we’ll do below.
What We’ll Be Making
Angular Material already provides a stepper component, but our stepper today has an enhanced UX and:
- It displays progress through a sequence of logical and numbered steps.
- It could also be used for navigation.
- It has a
goBackbutton (on the left side of its header) that could be used or removed.
