CODEWITHSUNDEEP
angulartypescriptpipe
user16831793
user16831793

Reputation:

Angular currency pipe without value

Is it possible to use the currency pipe without actual amount/value?

Usage with value as in https://angular.io/api/common/CurrencyPipe:

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <!--output 'CA$0.26'-->
    <p>{{a | currency:'CAD'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  a: number = 0.259;
  b: number = 1.3495;
}

Output: CA$0.26

However, I need to input 'CAD' and output 'CA$'. Is this possible somehow?

Desired behaviour:

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>{{currency | currency:'CAD'}}</p>
  </div>`
})

Desired Output: CA$

Upvotes: 1

Views: 1798

Answers (3)

Steven Price
Steven Price

Reputation: 91

I know this is an old one but nothing above works, but I found that this does:

{{ (0 | currency:'USD':'symbol-narrow')!.split('0')[0] }}

Upvotes: 0

noamyg
noamyg

Reputation: 3094

Just a slightly different idea: do not create a custom pipe just for that limited use case. Just cut off everything that comes after the currency.

{{ (0 | currency:'CAD').split('0')[0] }}

Upvotes: 0

Jakub Biernaczyk
Jakub Biernaczyk

Reputation: 392

If you look at the source code:

https://github.com/angular/angular/blob/master/packages/common/src/pipes/number_pipe.ts#L205

you'll find that pipe returns null if the input is "not a value" - if following function returns false:

function isValue(value: number|string|null|undefined): value is number|string {
  return !(value == null || value === '' || value !== value);
}

Probably, the best way to achieve your desired result is to create your own pipe. Take a look at the code of the CurrencyPipe. The most important fragment is:

currency = getCurrencySymbol(currency, display === 'symbol' ? 'wide' : 'narrow', locale);

Probably this is what you want to use.

Upvotes: 2

Related Questions