CODEWITHSUNDEEP
angulartypescriptinputcurrency-formatting
Harsha Bhat
Harsha Bhat

Reputation: 317

how to achieve currency type Input in angular 5?

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.

enter image description here

Upvotes: 12

Views: 62529

Answers (3)

TheParam
TheParam

Reputation: 10541

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!

Upvotes: 16

Sagar C
Sagar C

Reputation: 73

Here text box will show how you are expecting.

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

Upvotes: 1

Harsha Bhat
Harsha Bhat

Reputation: 317

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.

Upvotes: 1

Related Questions