Progress doesnt update when percent changes

[toalmoal]

Hi,

First of all, thanks for creating and sharing this beautiful component.

I am trying to use this in an angular 17 project, however when the percentage changes, the component doesnt reflect the change and stays at 0. renderOnClick would force a render, but that defeats the purpose.

The relavent sections of the code are as follows:

<circle-progress [percent]="uploadProgressPercent()" [renderOnClick]="false"></circle-progress>

and in .ts file (i'm using a form to pass on the upload progress atm)

uploadProgressPercent() { const value = _.get(this.formGroup, 'controls.uploadProgressPercent.value'); console.log(value); return value; }

[nishk02]

@toalmoal

I believe passing a method directly as the value for a property in Angular, like [percent]="uploadProgressPercent()", does not create a two-way data binding.

use property instead,
<circle-progress [percent]="uploadProgress" [renderOnClick]="false"></circle-progress>

uploadProgres!: any;
constructor() {
  this.uploadProgressPercent();
}
uploadProgressPercent() {
  this.uploadProgress = _.get(this.formGroup, 'controls.uploadProgressPercent.value');
}