Angular 5 - currencyPipe

Question

I have a problem with the already built in CurrencyPipe from Angular.

I need to display a currency sign using the CurrencyPipe but I can't use it unless I provide an input number.

Because the CurrencyPipe uses the current locale to get the currency sign, I was thinking that the input number could be optional.

Current Behaviour:

{{ 1 | currency:'USD' }} --> $1

Needed Behaviour:

{{ null | currency:'USD' }} --> $

Does any of you know if this is possible with the default Pipe? Thanks!!

Can't you do: `input ? {{input | currency:'USD':true}} : $` ? Or does it have to be strictly pipe? — Chau Tran, Feb 07 '18 at 17:10
That would work if the currency was only Dollars, but there are more, €, ... That was just a use case — David Casanellas, Feb 07 '18 at 17:27
Then it's not possible with default built-in pipe. The default CurrencyPipe returns null if the value is null. You'd need to have a custom pipe — Chau Tran, Feb 07 '18 at 17:44
Take a look at [this answer](https://stackoverflow.com/a/46093388/1009922). — ConnorsFan, Feb 07 '18 at 17:51

wessam yaacob · Accepted Answer · 2019-12-14T08:34:33.773

Update Angular 8

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

@Pipe({ name: 'CustomeCurrency' })
export class CustomCurrencyPipe implements PipeTransform {

    constructor(private currencyPipe: CurrencyPipe) { }
    transform(value: any, currencyCode?: string, display?: string | boolean, digitsInfo?: string, locale?: string): string {
        if (value != null)
            return this.currencyPipe.transform(value, currencyCode, display, digitsInfo, locale);
        return this.currencyPipe.transform(0, currencyCode, display, locale).split('0.00')[0];
    }
}

Try this simple custom currency pipe

{{ null | CustomeCurrency }}</p>

import { Pipe, PipeTransform } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Pipe({ name: 'CustomeCurrency' })
export class CustomCurrencyPipe implements PipeTransform {

constructor(private currencyPipe: CurrencyPipe) { }

transform(value: any, currency: string, symbol: boolean = false): string {
     if (value != null)
        return this.currencyPipe.transform(value, currency, symbol);
    return this.currencyPipe.transform(0, currency, symbol).split('0.00')[0];
 }
}

Yes, I did something similar to that, passing a 0 and getting a substring from the first digit till the end. — David Casanellas, Feb 08 '18 at 10:40

score 7 · Answer 2 · answered Aug 28 '18 at 11:40

If you're getting the error message The currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are "code", "symbol" or "symbol-narrow". then refer to the Angular documentation for help, use the code samples on this page to fix the issue: https://angular.io/api/common/CurrencyPipe

score 6 · Answer 3 · answered Apr 20 '18 at 09:21

6

The currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are "code", "symbol" or "symbol-narrow".

answered Apr 20 '18 at 09:21

dev-nish

771
6
4

score 6 · Answer 4 · edited Sep 15 '21 at 20:15

6

Use the Angular CurrencyPipe.

{{ money | currency:'USD':'symbol' }}

edited Sep 15 '21 at 20:15

xinthose

3,213
3
40
59

answered Aug 01 '20 at 10:55

Santosh Kumar Tanna

61
1
1

2

The answer looks to solve the problem. Could you be able to provide more info? Like the reference page for the same for the users to understand better? – shubham Aug 01 '20 at 11:24

lahiru dilshan · Answer 5 · 2020-07-29T11:10:49.033

4

You can replace DEFAULT_CURRENCY_CODE with your currency symbol and add a space.

app.module.ts > providers

providers: [ { provide: DEFAULT_CURRENCY_CODE, useValue: 'LKR ' } ],

edited Jul 29 '20 at 11:10

answered Jul 14 '20 at 16:56

lahiru dilshan

690
9
13

Rafael Pizao · Answer 6 · 2020-06-12T02:11:08.497

I solved with custom pipe (with symbol as parameter) because I need control when and how symbols shown.

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

@Injectable()
@Pipe({ name: '$' })
export class MoneyPipe implements PipeTransform {
  transform(value: number, symbol: string = null, decimalDelimiter: string = ",", thousandsDelimiter: string | null = "." ): any {
    if(!value) return symbol ? symbol + " -" : "";

    let roundValue = value.toFixed(Math.max(0, ~~2));
    let valueToReturn = roundValue.replace('.', decimalDelimiter);

    if(thousandsDelimiter) valueToReturn = this.setThousandsSign(valueToReturn, thousandsDelimiter);
    return symbol ? symbol + " " + valueToReturn : valueToReturn;
  }

  private setThousandsSign(value: string, delimiter: string): string {
    return value.split("").reverse().map((str, index) => {
      if(index <= 3) return str;

      return (index%3)===0 ? str+delimiter : str;
    }).reverse().join("");
  }
}

That was in HTML.

{{order.price | $}}

Using custom symbol.

{{order.price | $:'€'}}

shrvn · Answer 7 · 2020-08-06T15:10:13.647

1

try this

${{amount | number: '2.2'}}

if amount=5 then output-->$5.00

if amount=null then output-->$

edited Aug 06 '20 at 15:10

answered Aug 05 '20 at 11:47

shrvn

73
7

score 0 · Answer 8 · answered Mar 28 '22 at 18:06

I don't know your template, but if all the issue is the symbol, you can use the Material class, matPrefix before the input and put whatever symbol you need.

Ex.

<span matPrefix>$&nbsp;</span>
<input matInput 
       type="number"
       min="0"
       step="0.01"
       [value]="price | currency:'':'':'1.2-2'">

Angular 5 - currencyPipe

8 Answers8

Update Angular 8

Linked