New input control for Transaction Amounts

src/app/directives/directives.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 
 /** Custom Directives */
 import { HasPermissionDirective } from './has-permission/has-permission.directive';
+import { FormatAmountDirective } from './format-amount.directive';
 
 /**
  *  Directives Module
@@ -14,7 +15,7 @@ import { HasPermissionDirective } from './has-permission/has-permission.directiv
   imports: [
     CommonModule
   ],
-  declarations: [HasPermissionDirective],
-  exports: [HasPermissionDirective]
+  declarations: [HasPermissionDirective, FormatAmountDirective],
+  exports: [HasPermissionDirective, FormatAmountDirective]
 })
 export class DirectivesModule { }

src/app/directives/format-amount.directive.ts

@@ -0,0 +1,46 @@
+import { Directive, HostListener, ElementRef, Input, OnInit, Inject } from '@angular/core';
+import { formatCurrency } from '@angular/common';
+import { NgControl } from '@angular/forms';
+import { LOCALE_ID } from '@angular/core';
+
+@Directive({
+    selector: '[mifosxFormatAmount]',
+})
+export class FormatAmountDirective implements OnInit {
+    format = 'N0';
+    digitsInfo = '1.0-0';
+    currencyCode: string;
+    displaySymbol: string;
+    @Input() sufix = '';
+
+    @Input('mifosxFormatAmount') set _(values: string) {
+        const parts: string[] = values.split(':');
+        this.currencyCode = parts[0];
+        this.displaySymbol = (parts.length > 1) ? parts[1] : '$';
+        this.digitsInfo = (parts.length > 2) ? parts[2] : '1.2-2';
+    }
+
+    @HostListener('blur', ['$event.target']) blur(target: any) {
+        target.value = this.parse(target.value);
+    }
+    @HostListener('focus', ['$event.target']) focus(target: any) {
+        target.value = this.control.value;
+    }
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.el.nativeElement.value = this.parse(this.el.nativeElement.value);
+        });
+    }
+
+    constructor(
+        @Inject(LOCALE_ID) private locale: string,
+        private el: ElementRef,
+        private control: NgControl
+    ) { }
+
+    parse(value: any) {
+        return formatCurrency(value, this.locale, this.displaySymbol, this.currencyCode, this.digitsInfo) + this.sufix;
+    }
+
+}