Progress: Cannot read property '0' of undefined

Hello, in my Angular web app I have upgraded Semantic-UI from version 2.4.2 to Fomantic-UI 2.7.4.

Now, when I use progress module with something like this:

$(this._progress.nativeElement).progress('get percent')

I get the following error:

ERROR TypeError: Cannot read property '0' of undefined
    at HTMLDivElement.percent (semantic.min.js:11)
    at Object.invoke (semantic.min.js:11)
    at HTMLDivElement.<anonymous> (semantic.min.js:11)
...

In other cases if I use progress like this:

<div class="ui tiny green progress">
    <div class="bar" [style.width]="file.percent + '%'"></div>
</div>

I have no errors in console, but the progress bar doesn’t start or get filled like before upgrade.

For the first case I solved changing Fomantic-UI progress.js source file in the following way:

percent: function(index) {
  return module.percent ? module.percent[index || 0] || 0 : 0;
},
value: function(index) {
  return module.nextValue || module.value ? module.value[index || 0] || 0 : 0;
}

But this doesn’t do the trick for the second case as well.

What could I fix this?

[lubber-de]

@smartm0use Ok, here’s a proposal: If you add the static property data-percent (without any binding) to the progress element, then your approach, by changing the inline style width via Angular binding, also works with FUI 2.7.4+ (without JS instantiation through FUI) Please try

<div class="ui tiny green progress" data-percent>
    <div class="bar" [style.width]="file.percent + '%'"></div>
</div>

with FUI 2.7.4

See https://jsfiddle.net/jcgybd9m/

[smartm0use]

Yes, it worked, thank you!