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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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