YogeshChauhan . com

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

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 14 How to add Google Map in WordPress using ACF? May 13 How to add a select dropdown in React? May 12 What are Controlled Components in React? May 11 How to create a full screen loader using CSS and JavaScript? May 11 How to hide and show menu on scroll using JavaScript and CSS? May 10 @use rule in SCSS (Sass)

You might also like these

Number Properties in JavaScriptJavaScriptCheck If a String Contains a Specific Word in PHPPHPHow to create a Bootstrap style accordion using CSS and JavaScript?CSSHow to obfuscate JavaScript code to hide it from View Source?JavaScriptHow to create a sticky menu pin using CSS?CSSCan we execute conditions in SQL?SQL/MySQL