Yogesh Chauhan's Blog

How to add CurrencyPipe in TypeScript file in Angular 9 Project?

in Angular on September 19, 2020

We learned about CurrencyPipe in this post:

CurrencyPipe In Angular 9 With Examples

Using those examples in the post you can easily add CurrencyPipe in your template file.

But in this post, I’ll show your the steps to do the same using your TypeScript file.

Step 1

Import CurrencyPipe in your app.module file.

Your app.module file’s import section might look like this:


import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CurrencyPipe} from '@angular/common';
...
...

Step 2

Add CurrencyPipe to the provider’s array in your app.module file. Step 1 is required for Step 2.

So, your provider’s array will look like this:


....
....
  providers: [
    SomeService, 
    OtherService, 
    CurrencyPipe],
....
....

👉 Always make sure that you have the providers for any services you have created, otherwise you’ll get NullInjectorError.

Take a look at this post as well:

Solution To “NullInjectorError: No Provider For Module” In Angular 9

Step 3

Import CurrencyPipe in your component file.

Your component file’s import section might look like this:


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

Step 4

We need to create a private object for CurrencyPipe service as we do for any other service.

Your constructor part might look like this:


...
...
constructor(private currency_pipe_object: CurrencyPipe) { 
... 
}
...
...

Step 5

Now we need to use the transform pipe method to format the currency.

For example, if you’re getting the currency from an API,  you’d like to store it in a variable.


...
...
this.USD_currency = this.USD['currency'];
...
...

And then you’ll use that variable and format it like this:


...
...
this.USD_currency = this.currency_pipe_object.transform(this.USD_currency, 'USD'); 
...
...

This will add USD CurrencyPipe. You can change any country pipe supported by Angular.

You can use this Wikipedia list to get the country currency code and add into the CurrencyPipe.

ISO 4217 Wikipedia

Credit: Angular.io


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to create a simple text and image slider using CSS and JavaScript?CSSHow to define visibility for a property in PHP?PHPMoving folders in WordPress using codeWordPressWordPress: How to print ACF array field values?WordPressHow to avoid element shift on border change while hovering in CSS?CSSHow to apply style only to first child and/or only to children other than the first child?CSS