Custom Mutilevel stepper with progress bar using angular12?

Hello,

Creating a custom multi-level stepper with a progress bar in Angular 12 can be an intricate task, especially if you also want to include sub-steppers within each step. However, Angular’s powerful data binding and component-based architecture can make this task manageable. You can achieve this by breaking down the problem into smaller, manageable components and then assembling them together.

Step 1: Create the Stepper Component

First, you will need to create a stepper component that can handle both primary steps and sub-steps.

1. Create a New Component: Use Angular CLI to generate a new component:

   ng generate component multi-level-stepper
   

2. Define the Steps: In your stepper component, define the data structure to hold the steps and sub-steps. For example:

   export interface Step {
     title: string;
     completed: boolean;
     subSteps: SubStep[];
   }
   
   export interface SubStep {
     title: string;
     completed: boolean;
   }
   

3. Template for Stepper: In your component’s template, iterate over the steps and sub-steps to display them. Use Angular Material or similar UI libraries for a polished look, or create custom CSS styles.

   <!-- Multi-level-stepper.component.html -->
   <div *ngFor="let step of steps; let i = index">
     <div class="step" [class.completed]="step.completed">
       {{ step.title }}
       <div class="sub-steps" *ngIf="step.subSteps.length">
         <div *ngFor="let subStep of step.subSteps" [class.completed]="subStep.completed">
           {{ subStep.title }}
         </div>
       </div>
     </div>
   </div>
   

Step 2: Create the Progress Bar

For the progress bar, you can use Angular Material’s ProgressBar module or create a custom progress bar.

1. Install Angular Material (if not already installed):

   ng add @angular/material
   

2. Use Material Progress Bar: Import MatProgressBarModule in your module and use <mat-progress-bar> in your stepper component template.

   <mat-progress-bar mode="determinate" [value]="calculateProgress()"></mat-progress-bar>
   

3. Calculate Progress: Implement a method in your stepper component to calculate the progress based on the completion of steps and sub-steps.

   calculateProgress(): number {
     // Implement logic to calculate progress
   }
   

Step 3: Implement Sub-Stepper Logic

Within each primary step, you can have sub-steps. You need to manage the state of each sub-step and update the main step’s state accordingly.

1. Manage Sub-Step State: Update the completion state of each sub-step based on user interaction.

2. Update Main Step State: When all sub-steps of a main step are completed, update the main step’s completion state.

Step 4: Styling

Use CSS to style your stepper and progress bar. You can customize the styles as per your design requirements.

.step {
  /* styles for step */
}

.step.completed {
  /* styles for completed step */
}

.sub-steps {
  /* styles for sub-steps */
}

.sub-steps .completed {
  /* styles for completed sub-step */
}

Finally, integrate the stepper component into your application, and test its functionality thoroughly. Make sure the progress bar updates accurately as steps and sub-steps are completed.

This high-level guide gives you a starting point for implementing a multi-level stepper with a progress bar in Angular. Depending on your specific requirements and the complexity of your application, you might need to adjust and extend this basic implementation.

Best,

Bobby