how to customize the number pipe angular 2

Question

I would like to customize the number pipe angular 2 {{ myvar | number:'1.2-2' }} for a myvar = 1000 I get 1,000 what I would like is to get 1 000 a space in the place of the , any Ideas ?

The built-in `number` formatter doesn't support that, but the documentation https://angular.io/docs/ts/latest/guide/pipes.html describes writing your own custom pipe — Ryan Cavanaugh, Aug 12 '16 at 16:35

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

I find this solution from How to print a number with commas as thousands separators in JavaScript. And it works!

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}

edited May 23 '17 at 12:25

Community

1
1

answered Jan 08 '17 at 13:31

Movses

1
1

score 0 · Answer 2 · answered Aug 30 '17 at 10:08

You can chain pipes. {{ myvar | number:'1.2-2' | thousand }} and your thousand pipe can look like this.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'thousand'
})

export class ThousandPipe implements PipeTransform {
  transform(value: any, digits?: string): string {
    if (value) {
      let thousands = value.split(',');
      const preDecimalValue = thousands.pop();
      thousands = thousands.join(' ');
      return thousands + ' ' + preDecimalValue;
    }
    return '';
  }
}

Presuming that all of the thousands are separated by comma, you will set all thousands in thousands array. In your case, thousands will be ['1'], and preDecimalValue would be '000.00'.

how to customize the number pipe angular 2

2 Answers2