CODEWITHSUNDEEP
javascriptangulartypescriptangular8angular-pipe
swapnil jain
swapnil jain

Reputation: 262

How to use currency pipe to get values upto 2 decimal digits in component?

I have a values like 54781.7622000 , 1123.11. I want this values in a format like $54781.76 , $1123.11.

//import currency pipe
import { CurrencyPipe } from '@angular/common'

//initialize  in constructor
constructor(private cp: CurrencyPipe)

this.formatedOutputValue = this.cp.transform(parseInt(this.outputValue));

I have tried sum extra parameters after this value like.

this.formatedOutputValue = this.cp.transform(parseInt(this.outputValue),1.2-2);

But doesnt workout.

Upvotes: 6

Views: 25720

Answers (4)

George English
George English

Reputation: 1

You'll want to use the Currency pipe in your template like this:

{{ outputValue | currency }}

The default decimal point is 2 if a currency code is not specified.

Angular has excellent documentation on how to properly use their CurrencyPipe.

Upvotes: -1

nash11
nash11

Reputation: 8650

You are not passing all the needed parameters to the transform()

This is what the currency pipe transform() accepts in Angular (Source: Angular codebase)

transform(value: any, currencyCode?: string, display: 'code'|'symbol'|'symbol-narrow'|string|boolean = 'symbol', digitsInfo?: string, locale?: string)

You can fix your issue by passing the right data to the transform() like below.

this.formatedOutputValue = this.cp.transform(this.outputValue, 'USD', 'symbol', '1.2-2');

Here is a working example on StackBlitz. You can also see how to directly use the pipe in the template in this example.

Upvotes: 12

jitender
jitender

Reputation: 10429

you can do it using currency pipe only

this.cp.transform(this.data,'USD','symbol','1.2-2')

Stackblitz

Upvotes: 5

Alexander Andryichenko
Alexander Andryichenko

Reputation: 177

You can create pipe like this:

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

@Pipe({
 name: 'formatedOutputValue'
})
export class FormatedOutputValuePipe implements PipeTransform {

 transform(value: any, args?: any): any {
  return value.toFixed(2).replace(/[.,]00$/, "");
 }
}

In your template:

 <div>{{data.value | formatedOutputValue}}</div>

Upvotes: 1

Related Questions