Search code examples
angulartypescriptpipe

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$


Solution

  • 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.