Angular progressbar with steps

user_1312574 0
Viewed 694

I am trying to make a progress bar with steps in Angular 12, and that the bar advances in a certain way, indicating the percentage of progress. I have seen that the vast majority of examples advance directly from one step to another and not by percentage.It is to show the level of membership and that you know how much is missing to reach the next level. I have found this example in react CustomStepper, does anyone have any similar example for angular 12? Thanks a lot!!

enter image description here

angular typescript
3 Answers

I think what you are looking for is Angular Stepper but with a little modification.

This working example shows how to advance a stepper based on percentage without directly going on to the next step as well as moving to the next level on button click. Try modifying it to cater to your need!

I hope it helps.

user_80700680

I usually use the one provided by Angular Material. Check the link.

In Angular, the way to go when you want to modify the HTML dynamically is to use property binding. In this case, you bind the value property in order to receive dynamic updates from typescript.

user_117090210

Progress bar takes in basic percent value form 0...100 to determine how much to fill the bar. https://material.angular.io/components/progress-bar/overview

Create a method how you calculate this percentage and pass it to <mat-progress-bar>.

<mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar>
<br />
<br />
<button (click)="onStep(1)">next setp</button
><button (click)="onStep(-1)">previous step</button>

/**
 * @title Determinate progress-bar
 */
@Component({
  selector: 'progress-bar-determinate-example',
  templateUrl: 'progress-bar-determinate-example.html',
})
export class ProgressBarDeterminateExample {
  percent: number = 50;
  maxSteps: number = 20;
  currentStep: number = 10;

  onStep(step: number) {
    this.currentStep += step;
    if (this.currentStep > this.maxSteps) {
      this.currentStep = this.maxSteps;
    } else if (this.currentStep < 0) {
      this.currentStep = 0;
    }

    this.percent = (this.currentStep * 100) / this.maxSteps;
    console.log(step);
    console.log(this.percent);
  }
}

Working example: https://stackblitz.com/edit/angular-yfwjii?file=src%2Fapp%2Fprogress-bar-determinate-example.ts

user_154397330
Related