Format display value of Progressbar

[netbrothers-tr]

Bug description:

When using the option showValue, there are two issues:

1. There is no rounding (or is there?), such that numbers like 33.333333333333336 will get displayed. It would be nice to control the precision of the resulting float, down to integer only values (precision 0).

2. There is no way to format the displayed value (or is there?), such that the percent sign is always printed right next to the value without a space like 33.333333333333336% (minor problem). It would be nice to control the suffix after the number, to be able to even suppress the % sign or attach it with some space like 33.33 %. Also the displayed value cannot be localized (e.g. 33,33 % German format).

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-yipoxk

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9.1.0

ng-bootstrap: 6.1.0

Bootstrap: 4.4.1

[maxokorokov]

@netbrothers-tr, I think there are WAY too many formatting options out there, so I don't think it should be a part of the library.

You can just generate your label yourself and not use [showValue], you could use percent pipe directly:

https://stackblitz.com/edit/angular-pduj5a?file=src/app/progressbar-showvalue.ts

P.S. On the other hand you'll have to calculate value yourself in this case, so we might expose something like:

@Input() formatValue: (percentageValue: number) => string = v => `${v}%`;

Will mark as a feature request, should be an easy one.

[maxokorokov]

Now that I think of it, I have no idea why we're not using percent pipe in our implementation by default and we probably should as well :)

[netbrothers-tr]

Thank you @maxokorokov for your suggestion and the blitz. As a newbie, I wasn't aware of the fact that I could simply label the bar myself. My current solution looks like this:

<ngb-progressbar type="info"
    [max]="maxValue"
    [value]="currentValue"
    [striped]="true"
    [animated]="true">
    {{ currentValue / maxValue | percent }}
</ngb-progressbar>

I agree, piping through percent by default is a nice enhancement.

[benouat]

@gpolychronis would you mind having a look at this issue ?