Number pipes in Angular2 not working as I would expect

You're probably looking for the DecimalPipe.

The formatting is passed as a parameter to the pipe like this:

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

Using this with your needs:

number:'1.2-2'

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


Example usage from the docs:

@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;
}