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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
WP_Query Class in WordPressWordPressHow does while loop work in SCSS?SCSSWhy do we need HAVING Clause in SQL?SQL/MySQLPagination in CSS with multiple examplesCSSHow to import a CSS file using PHP code and not HTML code?PHPWhat are Stored Procedures for SQL Server?SQL/MySQL