Recommand · October 22, 2021 0

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$

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.