How to use Angular percentage pipe correctly in Angular 5 app?

Question

I have the current from the component template:

<strong>{{data.value | percent:'1.0-2'}}</strong>

The example value is 1.0 from the database which mean I need to show 1%. When using the percent pipe I'm getting 100% which is not correct.

Any idea how to combine decimal and percentage together? thanks.

Answer 1

There are multiple ways of solving this. One would be to divide data.value with 100. Which means

<strong>{{data.value / 100 | percent}}</strong>

will output 1%.

Other one would be to just concat % at the end.

<strong>{{data.value}}%</strong>

Meaning if you pass 1.02 it will show 1.02% if that is what you want