Search code examples
htmlangularprogress-bar

How to use HTML progress bar with angular

How to use HTML buil-in progress bar with Angular:

<label for="file">File progress:</label>

<progress id="file" max="100" value="70">30%</progress>

What I mean how to change dynamically value from angular component. Any thoughts?

Solution

  • To do this in Angular, you could make use of "Data Binding".

    In your Angular component TS file, create a variable to store the current progress:

     progressValue: number = 30;

    Then just insert the value in, so that it is dynamic, as follows:

    <label for="file">File progress:</label>
    <progress id="file" max="100" [value]="progressValue">{{ progressValue }}%</progress>

    If you want to change the progress bar, then the variable will be altered in the TS file.

    Reference: https://angular.io/guide/binding-syntax