{

Angular 13 Pipe Currency examples | format currency number price examples


Angular Currency pipe Example

It is a short tutorial about angular pipe currency examples.

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

Angular currency pipe

Angular has 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 an number value or expression to format currency: It is an object which contain currency object format rules currencyCode: Short code for currency and default currency code is USD( US dollar) display: it is an 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?

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 USED symbol to the number true: currency symbol is displayed or not 1.2-2, first digit is minimum number of integer digits(default=1) i.e number before . symbol,second digit(2,default is zero) represents decimals shown i.e decimals after . symbol the third digit is maximum decimals allowed(default to 3)

Currency pipe is not working in Angular

When you are using currency pipe, You used to 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.

THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.