💡 🧠 Join my free email newsletter about engineering, technology, and leadership: https://rakiabensassi.substack.com

You can follow me and find more of my articles here: https://rakiabensassi.medium.com/ And if you would like to support me, you can sign up here: https://rakiabensassi.medium.com/membership

I've published few articles describing this project here:

1. Build a Reusable Stepper as an Angular Library (Convey your process’s progress with a dynamic stepper): https://medium.com/better-programming/angular-library-dynamic-stepper-2ba05ab40228

2. Build a Custom Autocomplete-Search Angular App With a Dynamic Table (Play with CSS overlay and Angular Material components): https://betterprogramming.pub/angular-custom-autocomplete-7ffb479477e7

3. Build a Hand Pose Detector Web App Powered by Machine Learning: https://betterprogramming.pub/build-a-hand-pose-detector-web-app-powered-by-machine-learning-62131ec43db5

4. How to Host and Deploy an Angular App on Firebase: https://levelup.gitconnected.com/host-and-deploy-on-firebase-cbca4aad2fa6

5. How TensorFlow.js Became a Performance Bottleneck for My App: https://betterprogramming.pub/web-performance-and-tensorflow-js-3db05b1de958

6. How I Won My Battle of Using TensorFlow.js Without Leaking Memory: https://levelup.gitconnected.com/how-to-use-tensorflow-js-without-memory-leaks-273ad16196be

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 here: https://medium.com/better-programming/angular-library-dynamic-stepper-2ba05ab40228

Angular Library: A Dynamic Stepper

This project was generated with Angular CLI version 10.2.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.