Angular Pipe Currency examples | format currency number price examples

Angular Currency pipe Example

It is a short tutorial about angular pipe currency examples.

  • Format long numbers into the currency
  • How to display the currency symbol to the right in Angular

Angular currency pipe

Angular has an inbuilt pipe called CurrencyPipe from @angular/common module.

This is used to convert and format numbers into currency strings using localization. Here is the syntax in the HTML template

{{ expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

expression: is a number value or expression to format currency: It is an object which contains currency object format rules currencyCode: Shortcode for currency and the default currency code is USD( US dollar) display: it is a string or boolean digitsInfo: Represent decimal format


Angular Currency pipe example

Let’s create a new component in Angular for testing currency pipe in Angular.

A:\work\angular-pipe-examples>ng g component currency-pipe-example
CREATE src/app/currency-pipe-example/currency-pipe-example.component.html (36 bytes)
CREATE src/app/currency-pipe-example/currency-pipe-example.component.spec.ts (719 bytes)
CREATE src/app/currency-pipe-example/currency-pipe-example.component.ts (334 bytes)
CREATE src/app/currency-pipe-example/currency-pipe-example.component.scss (0 bytes)
UPDATE src/app/app.module.ts (951 bytes)

This creates an angular component in the src/currency-pipe-example folder.

In this example, used various format options of currency pipe in Angular code Here is a component that contains a number.

import { Component, OnInit } from '@angular/core';

  selector: 'app-currency-pipe-example',
  templateUrl: './currency-pipe-example.component.html',
  styleUrls: ['./currency-pipe-example.component.scss']
export class CurrencyPipeExampleComponent {

  constructor() { }
  price = 123145;


See various options declared

<p>Angular Currency Pipe Example</p>

<div>Price: {{price | currency}}</div>

<div>Price: {{price | currency}}</div>

<div>Price: {{price| currency:'EUR'}}</div>

<div>Price: {{price | currency:'EUR':'code'}}</div>

<div>Price: {{price | currency:'EUR':'symbol':'4.2-2'}}</div>

<div>Price: {{price | currency:'EUR':'symbol-narrow':'4.2-2'}}</div>

<div>Price: {{price | currency:'EUR':'symbol':'4.2-2':'en'}}</div>

<div>Price: {{price | currency:'EUR'}}</div>


Price: $123,145.00
Price: $123,145.00
Price: €123,145.00
Price: EUR123,145.00
Price: €123,145.00
Price: €123,145.00
Price: €123,145.00
Price: €123,145.00

how to display a number as two decimal rounded currency in angular?

Suppose you have a numbers

  • 20 to $20.00
  • 10.111 to $ 10.11

Let’s create an angular typescript component. Create and Initialize an array of an employee with data.

import { Component, OnInit } from '@angular/core';

  selector: 'app-currency-pipe-example',
  templateUrl: './currency-pipe-example.component.html',
  styleUrls: ['./currency-pipe-example.component.scss']
export class CurrencyPipeExampleComponent  {

  constructor() { }
  price = 20;


Let’s format the number into USE currency with 2 decimal places in the Angular HTML component.

<p>Angular Currency Pipe Example</p>
{{price | currency:'USD':true:'1.2-2'}}</div>
<div>{{price1 | currency:'USD':true:'1.2-2'}}</div>



currency:USD tells to print the USD symbol to the number true: currency symbol is displayed or not 1.2-2, the first digit is the minimum number of integer digits(default=1) i.e number before the . symbol, second digit(2, default is zero) represents decimals shown i.e decimals after the . symbol the third digit is the maximum decimals allowed(default to 3)

Currency pipe is not working in Angular

When you are using currency pipe, You used get the following errors.

  • Unhandled Promise rejection: Template parse errors The pipe ‘currency’ could not be found
  • currency pipe does not work in Angular
  • pipe not found in Angular

The reason is currency pipe is a pipe from the CommonModule of the @angular/common module.

You have to import CommonModule in the application module i.e app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

  imports: [
  declarations: [AppComponent],
  bootstrap: [AppComponent]
export class AppModule {}


To Sum up, Learned what is currency pipe with syntax in Angular and displays formatted currency numbers.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.