Angular Pipe Currency examples | format currency number price examples

Angular Pipe Currency examples | format currency number price examples

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

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

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";

@Component({
  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>

Output:

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";

@Component({
  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>
<div>{{price | currency:'USD':true:'1.2-2'}}</div>
<div>{{price1 | currency:'USD':true:'1.2-2'}}</div>

Output

$20.00
$10.11

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 { BrowserAnimationsModule } from "@angular/platform-browser/animations";

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

@NgModule({
  imports: [BrowserModule, FormsModule, CommonModule, BrowserAnimationsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Conclusion

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