EasyCurrency Angular Input Mask
EasyCurrency is an independend Angular input mask for filtering the input in any input field. The directive does not use the ControlValueAccessor class, so it can be used on custom input field (e.g. the matInput
from angular-material).
Getting started
Install the npm package
$ npm install easy-currency
Add the EasyCurrencyModule
to the app module
...
import { EasyCurrencyModule } from 'easy-currency';
@NgModule({
declarations: [
AppComponent
],
imports: [
...,
EasyCurrencyModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Use the easyCurrencyMask
-Directive on any ControlValueAccessor
you want
<input easyCurrencyMask [(value)]="value">
<mat-form-field appearance="fill">
<mat-label>Money</mat-label>
<input matInput easyCurrencyMask [(value)]="value">
</mat-form-field>
The value properties takes a number that represents the amount of cent of the actual value. So € 12,31
has the value 1231
.
Note1: The disadvantage of this approach is that the input format is updated only after the key is released.
Note2: At the moment the only currency format is the general European Euro format (€ 11.232,00
). Format configurations will follow shortly.