About
This package helps you to enter currency amount value in HTML input field. With this package you can enter the decimal values first, then you can enter the left side digits.
Example
If you want to enter 80600.50 then it will get entered like below :
step 1 : Enter the 2 decimal digits : 50
step 2 : As soon as we put the first 2 decimal digits, the dot(.) or decimal point will get appended : .50
step 3 : The cursor position will get changed and it will come to the left side of the dot(.)
step 4 : Now we can enter the amount on left side : 80600.50
Installation
npm i currency-amount-input-format --save
Then...
in your app.component.ts file
import { Component, OnInit } from '@angular/core';
import * as currencyAmountFormatter from 'currency-amount-input-format';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit() { }
amountFormatter() {
//pass the input field ID as parameter
currencyAmountFormatter.formatAmount('input-amnt-field-id');
}
}
Then...
in your app.component.html file
Use "input" event to trigger the amountFormatter() function call. Don't forget to add unique "id" for your input field
<span>
<span style="font-size: x-large;">Amount : </span>
<input id="input-amnt-field-id"
style="height:30px;font-size: x-large;" type="text"
(input)="amountFormatter();"/>
</span>
miscellaneous
If you like this package do follow me on github.