Angular progressbar with steps-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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/app/progress-bar-determinate-example.ts

CodePudding user response：

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.