The number of pipes in Angular2 does not work as I would expect

Question

platform-browser.umd.js:962 ORIGINAL EXCEPTION: 2 is not a valid digit info for number pipes 

This is what I get from writing this in my template:

 <li>Percentage satisfied: {{selectedCountry.averageSatisfaction | number:2}}</li> 

My intention is to produce a decimal with two decimal places. Can someone point out what I'm doing wrong? Here is the documentation: https://docs.angularjs.org/api/ng/filter/number

Answer 1

You may be looking for DecimalPipe .

Formatting is passed as a parameter to this channel as follows:

 number:'{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}' 

Using this with your needs:

 number:'1.2-2' 

This will give you a string with a minimum digit to the decimal point and exactly 2 after the decimal point.

---

Example use from documents:

 @Component({ selector: 'number-example', pipes: [DecimalPipe], template: `<div> <p>e (no formatting): {{e}}</p> <p>e (3.1-5): {{e | number:'3.1-5'}}</p> <p>pi (no formatting): {{pi}}</p> <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p> </div>` }) export class NumberPipeExample { pi: number = 3.141; e: number = 2.718281828459045; }