How to use Angular number pipe in Component and Service

Question

I use below number pipe to format quantity:

{{tradcollapse?.quantity | number}}

example show as 1,234,0.

I want to use this format quantity in Component with filtered, not a number with as it is 12340. How can I implement it?

score 12 · Answer 1 · answered May 06 '19 at 15:34

12

In case someone else needs to do this, you now have to import DecimalPipe instead of NumberPipe.

e.g.

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

Then transform e.g.

// Format cost amount to currency to improve readability of number.
formatToCurrency(r) {
  let val = this.decimalPipe.transform(r.get('Amount').value, '1.2-2')
  r.get('Amount').setValue(val);
}

answered May 06 '19 at 15:34

Danmar Herholdt

215
2
5

5

I found that I also had to add the pipe in my app.module providers: `providers: [DecimalPipe]` – Dan Manastireanu Apr 22 '20 at 14:04
You can add it directly to the component directive too. Also do not forget to add it to the constructor :P – Abhishek Nov 01 '22 at 05:35

score 9 · Answer 2 · answered Feb 03 '20 at 12:16

9

You can try with formatNumber function Angular 8.

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

//wherever is needed

console.log(formatNumber(this.numberValue,"en-US", "1.2-3"));

Refer https://angular.io/api/common/formatNumber

answered Feb 03 '20 at 12:16

Srinivas Rampelli

785
7
17

score 2 · Answer 3 · answered Jun 30 '17 at 11:21

2

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

class MyService {

  constructor(private numberPipe : NumberPipe ) {}

  transformNumber(number) {
    this.numberPipe .transform(number);
  }
}

something like this , or take help from

Angular 2/4 use pipes in services and components

answered Jun 30 '17 at 11:21

Ashutosh Jha

15,451
11
52
85

1

the version is "@angular/common": "2.0.0-rc.2" , has no exported member 'NumberPipe' . there is a another way? – Victor Guan Jun 30 '17 at 11:33
try to use as : new NumberPipe().transform(number); – Ashutosh Jha Jun 30 '17 at 11:35
it doesn't work , may be NumberPipe dont support on AngularJS 2 rc version? – Victor Guan Jun 30 '17 at 11:43
3

@VictorGuan you should not use the rc.2 version of angular when the current stable version is 4.2.5. Start by changing that. rc2 is completely obsolete. Thenread the documentation: https://angular.io/api?type=pipe the name of the pipe is DecimalPipe, not NumberPipe. – JB Nizet Jul 01 '17 at 09:35
@JB Nizet this is a place in a stopgap using rc.2 version , will upgrade version in coming day.in addition to , it does works with DecimalPipe, thank you your kindness. – Victor Guan Jul 03 '17 at 06:16

How to use Angular number pipe in Component and Service

3 Answers3