how to achieve currency type Input in angular 5?

Question

I want following thing to happen in my angular 5 application.

I am having text box where i am inputting numeric values, as soon as focus of that text box is lost, Numeric values i entered should be formatted to currency with '$' and ',','.' symbols. how to achieve this?

I want to show my input numeric values as in below picture.

I have added solution on stackblitz pleas check https://stackblitz.com/edit/angular-qprls8?file=src%2Fapp%2Fapp.component.ts — TheParam, Jan 28 '19 at 06:10

TheParam · Answer 1 · 2019-01-28T07:33:49.427

14

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!

edited Jan 28 '19 at 07:33

answered Jan 28 '19 at 05:44

TheParam

10,113
4
40
51

Thank you. this is really helpful. but i am getting output like 'USD456,132.00' i.e, instead of '$' symbol i am getting 'USD'. – Harsha Bhat Jan 28 '19 at 06:36
1

If you seet stackblitz demo there you will get the what you want to achieve – TheParam Jan 28 '19 at 06:44
i observed many people facing same issue. https://github.com/angular/angular/issues/16374 . For now i have done like this -> this.houseHoldIncome = this.currencyPipe.transform(this.houseHoldIncome, 'USD').replace("USD", "$"); – Harsha Bhat Jan 28 '19 at 07:30
instead of doing like that just replace the 'USD' to '$' this will help – TheParam Jan 28 '19 at 07:32

Sagar C · Answer 2 · 2019-01-28T06:04:45.217

1

Here text box will show how you are expecting.

<input name="money" type="text" value="{{amount | number :'1.2-2' | currency }}" [(ngModel)]="amount"/>

edited Jan 28 '19 at 06:04

answered Jan 28 '19 at 05:58

Sagar C

73
1
6

This does not work at all. – howserss Jun 15 '22 at 13:14

score 0 · Accepted Answer · answered Jan 28 '19 at 05:56

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)">

here on blur of text box i am calling "formatCurrency_TaxableValue($event)" function.

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.

how to achieve currency type Input in angular 5?

3 Answers3