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.

Answer 1

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.