Topic: Progress bar not showing progress

Declan Ward priority asked 1 year ago


** Task**

I am using a countdown timer to display remaining time for a process. The timer starts at the max time allowed decrementing each second to zero. The progress bar, background colour grey, starts off a colour (yellow) full width and should start to slide to the left exposing the gray background, eventually exposing the full gray background at zero time remaining

enter image description here

In this image, 95 seconds remain which means the progress bar should be almost full. The size of the yellow bar is dictated by style="width:xx%" How do I update this?

Expected behavior

I should see visible progress.

Actual behavior

No visible progress.

Also: cannot bind to valuenow

Resources (screenshots, code snippets etc.)

As per documentation:

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

However, if I try binding to valuenow, I get an error.

aria-valuenow="{{valueNow}}"

Can't bind to 'aria-valuenow' since it isn't a known property of 'div'.

This removes the error but doesn't seem to do anything:

attr.aria-valuenow="{{valueNow}}"

In the documentation the width of the progressing bar seems to be controlled by

style="width:70%"

but I cannot bind to this.


Declan Ward priority answered 11 months ago


Thank you Rafal,

As a relative newbie to Angular I was unaware of this.

For anyone else having similar problems, the might find guidance at

https://angular.io/guide/binding-overview

https://angular.io/guide/attribute-binding

Regards,

Declan


Rafał Seifert free answered 1 year ago


Binding dynamic attributes to your angular html element should look like this:

<div class="progress" style="height: 20px">
  <div
    class="progress-bar"
    role="progressbar"
    [style.width.%]="timeRemaining"
    [attr.aria-valuenow]="timeRemaining"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    {{ timeRemaining }}
  </div>
</div>

In above example timeRemaining is a number property declared in the component class. You can update this property in your component class appropriately and it will update the style of the element.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.1.0
  • Device: Desktop
  • Browser: All
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No