toFixed Issue

[cerge]

HI, I would like to know if i can receive some support, im doing a ionic4 app with this component and all its ok, but when i want to add the setting [toFixed]="2" nothing happens, i mean, i run app and seems like this property was ignored. Really i would thank some help cause i need fix this issue with urgency, and build this app, and all its ok, but the app looks different to web, and its a problem. Thanks in advance

[cerge]

Can someone help me ,please?

[bootsoon]

https://github.com/bootsoon/ng-circle-progress/blob/fc1d2b477699a6eff8a5ecf9008f0fd049dfc630/projects/ng-circle-progress/src/lib/ng-circle-progress.component.ts#L361

toFixed is a simple option which should work.

Have you try titileFormat callback to format the title as you wish?

[bootsoon]

I have no Ionic development environment. May be Number.toFixed function works differently in your context.

You could try titleFormat callback to format the title:

<circle-progress  [percent]="vaya.porcen  * 10"  [radius]="15" [outerStrokeWidth]="3"
                            [outerStrokeColor]="'#7EFA5F'" [space]="-3" [innerStrokeWidth]="3"
                            [innerStrokeColor]="'#e8e8e8'" [animation]="true" [animationDuration]="300" [lazy]="false"
                            [titleFontSize]="10" [showSubtitle]="false" [showUnits]="false" 
                            [titleFormat]="formatTitle">
                        </circle-progress>

formatTitle = (percent: number) : string => {
    // Don't use it unless `Number.toFixed()` works unexpectedly.
   // e.g. (5).toFixed(2) should return "5.00" but it returns "5" instead. 
    function pad(s, num){
        if(num <= 0) return s.replace(/\..*/, '');
        if(s.indexOf('.')==-1){
            s += '.'
        }
        if(s.length - s.indexOf('.') - 1 > num){
            return s.substring(0, s.indexOf('.') + num + 1);
        }else{
            return s + ''.padEnd(num - (s.length - s.indexOf('.') -1), '0');
        }
    }
    return pad( percent.toFixed(2), 2);
}

@cerge

[cerge]

Thanks, I've updated the function on this way:

<circle-progress id="circleprogress1" [percent]="vaya.porcen * 10" [toFixed]="2" [radius]="15" [outerStrokeWidth]="3" [outerStrokeColor]="'#7EFA5F'" [space]="-3" [innerStrokeWidth]="3" [innerStrokeColor]="'#e8e8e8'" [animation]="true" [animationDuration]="300" [lazy]="false" [titleFontSize]="10" **[title]="vaya.porcen"** [showSubtitle]="false" [showUnits]="false"> </circle-progress>

and in ts:

` for (const key in this.Vaya) {

   this.Vaya[key].porcen= this.pad(this.Vaya[key].porcen, 2);

  i++;
}

pad(s, num){ if(num <= 0) return s.replace(/..*/, ''); //in typescript we need add .toString() if(s.toString().indexOf('.')==-1){ s += '.' } if(s.length - s.toString().indexOf('.') - 1 > num){ return s.substring(0, s.toString().indexOf('.') + num + 1); }else{ return s + ''.padEnd(num - (s.length - s.toString().indexOf('.') -1), '0'); } }

THe only problem that still i see is that by sample, i see 1.4 instead 1.40

`

[bootsoon]

That's weird.

[cerge]

Yes, i know, really i dont know what to do.