Problem setting ons-progress-bar value dynamically

  • Hi Team,

    We have noticed that the value property of ons-progress-bar can’t be set dynamically. Though we have found an alternative way but I thought to report in case if you want to have a look.

    Not working
    <ons-progress-bar value="{{record.percentage}}"></ons-progress-bar>

    It throws an error - ons-progress-bar.js:119 Uncaught TypeError: Cannot read property ‘style’ of undefined

    Alternative solution
    <div class=“progress-bar progress-bar–determinate”>
    <div class=“progress-bar__secondary” style=“width: 0%;”></div>
    <div class=“progress-bar__primary” style=“width: {{record.percentage}}%;”></div>


  • Onsen UI

    @CNaik I’m not sure why that happened in your app but it works here. I guess you could also use ng-attr-value attribute instead of value.

  • @Fran-Diox yes, can see it working in sample.

    I will have a look again in our source to see what’s causing the problem.


  • It does not work with Angular2 bindings, right?

  • Onsen UI

    @Žygimantas-Beržiūnas I think it does. Any problem with it?

Log in to reply