{

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 numbers into the 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 the 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.