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.
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!
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.
