how to achieve currency type Input in angular 5?

Here you need CurrencyPipe transform on (blur) event.

In your app.module.ts add CurrencyPipe provider.

import { CommonModule, CurrencyPipe} from '@angular/common';@NgModule({  ...   providers: [CurrencyPipe]})export class AppModule { }

App.component.html

Bind event onblur event to input textbox.

<h1>On Focus lost change Format amount</h1><input type="text"(blur)="transformAmount($event)" [(ngModel)]="formattedAmount"  />

In your App.component.ts file write method transformAmount($event)

AppComponent.ts

import { Component,ElementRef } from '@angular/core';import { CommonModule, CurrencyPipe} from '@angular/common';@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})export class AppComponent  {  name = 'Angular'; formattedAmount; amount;   constructor(private currencyPipe : CurrencyPipe) {  }   transformAmount(element){      this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, '$');      element.target.value = this.formattedAmount;  }}

See this Demo

Hope above solution will help you!

Installation - mat currency-format

$ npm i mat-currency-format

DescriptionThe directive can be used in html input to automatically change the input to locale currency.

Input in any locale currency convert to number inside the component. On focus the user will see to type in number and on focus out the user will see the number in currency format with the support of internalization format and currency symbol

The selector name of the directive is mvndrMatCurrencyFormat

The directive consists of two inputs:

currencyCode (default value = 'USD') allowNegative (default value = false)

Demo

<input type="text"      mvndrMatCurrencyFormat      [allowNegative]="false"      [currencyCode]="'USD'"      [value]="usAmount"      (blur)="updateUSAmount($event)" />

hope this will help,Cheers !

I have found a way..! I installed a package in my angular 5 application which provides this functionality.

I have done in this way.

npm install currency-formatter --save

Code of .html is as follows:

<input type="text" [(ngModel)]="taxableValue" (blur)="formatCurrency_TaxableValue($event)">

Code of .ts file is as below.

formatCurrency_TaxableValue(event)  {    var uy = new Intl.NumberFormat('en-US',{style: 'currency', currency:'USD'}).format(event.target.value);    this.tax = event.target.value;    this.taxableValue = uy;  }

this way it worked for me.