I'm learning Angular2 and I want to format a number adding thousand comma separator. As far as I have read this can be done using Pipes, the thing is that I want to format the number programmatically in the js file not in html (doing like var | number).

First of all I've realized there is no NumberPipe standalone pipe that I can work with (correct me if I'm wrong) the most similar one is CurrencyPipe in @angular2/common. So I have something like this:

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  templateUrl: 'testponent.html',
  styleUrls: ['./testponent.scss']
})
export class TestComponent {
    public myNumber = 1000;

    constructor(private currencyPipe: CurrencyPipe) {    
        var formatted = this.currencyPipe().transform(this.myNumber, 'MXN', true); // Is this correct?
    }

}

But it throws me the following error: Unhandled Promise rejection: No provider for CurrencyPipe! ; Zone: angular ;...

What am I doing wrong?

Thanks in advance.

Regards

I'm learning Angular2 and I want to format a number adding thousand comma separator. As far as I have read this can be done using Pipes, the thing is that I want to format the number programmatically in the js file not in html (doing like var | number).

First of all I've realized there is no NumberPipe standalone pipe that I can work with (correct me if I'm wrong) the most similar one is CurrencyPipe in @angular2/common. So I have something like this:

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  templateUrl: 'test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
    public myNumber = 1000;

    constructor(private currencyPipe: CurrencyPipe) {    
        var formatted = this.currencyPipe().transform(this.myNumber, 'MXN', true); // Is this correct?
    }

}

But it throws me the following error: Unhandled Promise rejection: No provider for CurrencyPipe! ; Zone: angular ;...

What am I doing wrong?

Thanks in advance.

Regards

• javascript
• angular
• typescript
• angular2-pipe

• why not use it like {{ myNumber | currency:'USD':true }} – MrNew Commented Jan 24, 2017 at 22:47
• 3 @MrNew Because I'm retrieving data from an API a using it to draw a Chart.js chart... No HTML here, so I can't use it {{myNumber | currency}}, I need to format the data programatically. – didi3r Commented Jan 25, 2017 at 14:26

2 Answers 2

First thing: you need to declare your pipe - add it to the NgModule declarations section:

declarations: [CurrencyPipe]

Second thing: pipes are not injectables, so you can't take its instance by using Angular dependency injection system. You need to create new instance of this pipe manually, like:

var formatted = (new CurrencyPipe()).transform(this.myNumber, 'MXN', true);

This actually works in an @Injectable display utility service with even less fuss than the previous answer involving modules. I imported my data model (below) and the pipe, then simply added the function. So, if you can't use the pipe directly in markup, use this trick!

export interface MoneyDTO extends SerializableDTO, JsonModelObjectDTO {
  value?: string;
  currency?: string;
}

import { CurrencyPipe } from '@angular/common';

formatMoney(money: MoneyDTO): string {
  const cp: CurrencyPipe = new CurrencyPipe('en-US');

  return money && money.value ? cp.transform(money.value, money.currency || 'USD', 'symbol') : null;
}