Topic: How to assign variable quantity to "value" attribute of
usnjay free asked 5 years ago
Expected behavior
Assigning an angular function to the "value" attribute for mdb-progress should change the value.
Actual behavior
No change. The value looks to be around 5?
What I've tried
-- Completely removing the ngb-progressbar (only re-inserted it from an old commit to show in the screenshot below)
-- Using an absolute value, like value="68".
-- Initially had all of the aria attributes, didn't seem to be a factor.
-- Using ngStyle per Angular docs: https://angular.io/api/common/NgStyle
-- various versions of value={{...}}/{[...]} even though I knew they shouldn't work.
Resources (screenshots, code snippets etc.)
Screenshot. Top bar is from another component library Ng-progressbar, bottom is mdb-progress element.
Pick hosted on Imgur, not sure how long it stays valid.
Code: Post.component.html
<!--
post.score is a number between 0-1.
As shown in the picture, it evaluates to 0.5 just fine and is then multiplied by 100,
so should be 50 (as in the ngb-progressbar).
-->
<div *ngIf="post.type == 'fact'" >
<ngb-progressbar
[type]="barType"
[value]="post.score*100"
[height]=".75">
{{post.score*100 | number : '2.0-0'}}% {{barText}}
</ngb-progressbar>
<mdb-progress
[value]="post.score*100"
[attr.min]="0"
[attr.max]="100">
{{post.score*100 | number : '2.0-0'}}% {{barText}}
</mdb-progress>
</div>
Damian Gemza staff answered 5 years ago
Dear usnjay,
I have tried your code, and it works fine. I have also tried to reproduce it with my code, and it also works fine.
I have there a simple value = 0.5
variable in component.ts file, and in the component.html file I'm using mdb-progress
as below:
<div class="row">
<div class="col-md-6 mx-auto my-5">
<mdb-progress [value]="value * 100" min="0" max="100" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{value * 100}}</mdb-progress>
</div>
</div>
And everything is working fine (mymdb-progress
is 50% filled (so the value is 50)).
Could you please try to not to use the ngb-progressbar module? Just remove it, leave only MDB for UI (maybe there's some strange conflict while using ngb-progressbar and mdb-progress).
Best Regards,
Damian
usnjay free commented 5 years ago
Thanks Damian. After completely uninstalling the ngb module (via npm uninstall and running npm prune) the issue persists. I've tried everything that came to mind with no luck, I suspect that either ngb or some other package has modified the underlying bootstrap/CSS classes and values.
Arkadiusz Idzikowski staff commented 5 years ago
Please send a simple demo on which we will be able to debug this problem to a.idzikowski@mdbootstrap.com
usnjay free commented 5 years ago
Not sure what you mean, but I've went ahead with the work-around of using ngb for now. Lesson learned is that the packages aren't really compatible as they seem to have dueling css somewhere. Thanks for your help.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.3
- Device: PC
- Browser: Chrome, Firefox, Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes