CODEWITHSUNDEEP
cssangulartypescriptbootstrap-4angular-material
Eugenio
Eugenio

Reputation: 128

How do you implement a simple progress bar in Angular 8?

I would like to implement a progress bar which increases progressively as a variable increases.

I've tried it 3 ways, none of them work as I wrote it.

.base{
    height: 10px;
    width: 100%;
    background: #ddd;
}

.pBar{
    height: 10px;
    background: #009200;
}

while in component.html:

<div class="base">
    <div class="pBar" [ngStyle]="{'width.%':value}"></div>
</div>

where 'value' is a numeric value declared in the component.ts and initialized to 10 in ngOnInit()

Result: a progress bar at 100%, if I change 'value' the result remains unchanged

importing the library and inserting it in the module.ts imports and then inserting it in the component.html:

<mat-progress-bar mode="determinate" value="40" color="warn"></mat-progress-bar>

Result: a black bar that starts from the middle of the screen and goes all the way to the right end; changing value, even manually, nothing changes.

I imported the library from the terminal and used it in the html component:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

by inserting below a js script with a setInterval to progressively change the value of aria-valuenow and width:

functionJs

Result: a fixed bar at 100%, but manually changing the value of width the bar changed size of course

Did I do something wrong? How can I achieve my goal? Thank you

Solution:

Thanks to Sebastien Servouze for showing me the way.

This is the progress bar I wanted to make (using bootstrap 4)

In the component.html:

<div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [ngStyle]="{'width.%': progress * 100}" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

In the component.ts:

import { timer } from 'rxjs';

progress!:number;
ngOnInit(): void {
this.progress = 0;
this.start(); }

start(){
    timer(0, 50).subscribe(()=>{
      while (this.progress < 1)
        this.progress+=0,01;
    });}

I hope I've helped someone else.

Upvotes: 1

Views: 7894

Answers (2)

Michalio
Michalio

Reputation: 1

You can use the <progress> tag to use builtin progressbar, more about that you can find here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress And here: https://css-tricks.com/html5-progress-element/

Upvotes: 0

Sebastien Servouze
Sebastien Servouze

Reputation: 770

Simplest code I can think of

  1. Set two divs, one for the background, one for the fill, set the width of the fill div with ngStyle, where progress is a number between 0 and 1
<div class="progress-bar">
  <div class="progress-bar-fill" [ngStyle]="{'width.%': progress * 100}"></div>
</div>
  1. Set progress bar width and height so you can use % for the width. Also set height for the fill div
.progress-bar {
  width: 200px;
  height: 25px;
  background-color: #222;
}

.progress-bar-fill {
  background-color: #5F5;
  height: 100%; /* This is important */
}

Upvotes: 2

Related Questions