How to use DecimalPipe from component in angular?

angular pipe angular7 angular-pipe
Soumya Gangamwar picture Soumya Gangamwar · Dec 17, 2018 · Viewed 13.3k times · Source

I have a requirement that I have to convert the number using the decimal pipe from ts

Instead of use decimal pipe like this

<td>{{rmanFmvRulesDef.max  | number :'1.2-2'}}</td>

I want to manipulate it from the component, can anyone please help me?

Answer

parag badala picture parag badala · Dec 17, 2018

As usual in angular you can rely on DI. You can override the transform function in the ts. 

import { DecimalPipe } from '@angular/common';
class MyService {
  constructor(private _decimalPipe: DecimalPipe) {
}
transformDecimal(num) {
    return this._decimalPipe.transform(num, '1.2-2');
   }
}

Add DecimalPipe in the providers Array otherwise it will give an error

providers: [DecimalPipe,...]

Related questions

Using Pipes within ngModel on INPUT Elements in Angular

I've an HTML INPUT field. <input [(ngModel)]="item.value" name="inputField" type="text" /> and I want to format its value and use an existing pipe: .... [(ngModel)]="item.value | useMyPipeToFormatThatValue" .... and get the error message: Cannot have a pipe …

Read More
Limit to 2 decimal places with a simple pipe

I have found an example which limits a number to 2 decimal places AND turns the figure into a currency amount- eg £2.55. {{ number | currency : 'GBP' : true : '1.2-2'}} Is there a simple pipe which does the same without applying a …

Read More
What are the parameters for the number Pipe - Angular 2

I have used the number pipe below to limit numbers to two decimal places. {{ exampleNumber | number : '1.2-2' }} I was wondering what the logic behind '1.2-2' was? I have played around with these trying to achieve a …

Read More