Angular 2 Commonly built-in directives and services Currency Pipe

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

The currency pipe allows you to work with you data as regular numbers but display it with standard currency formatting (currency symbol, decimal places, etc.) in the view.

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>A: {{myMoney | currency:'USD':false}}</p>
    <p>B: {{yourMoney | currency:'USD':true:'4.2-2'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  myMoney: number = 100000.653;
  yourMoney: number = 5.3495;
}

The pipe takes three optional parameters:

  • currencyCode: Allows you to specify the ISO 4217 currency code.
  • symbolDisplay: Boolean indicating whether to use the currency symbol
  • digitInfo: Allows you to specify how the decimal places should be displayed.

More documentation on the currency pipe: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html



Got any Angular 2 Question?