Transforms a number to a currency string and Currency thousandth format in angular form.

amount-mask.directive.ts

@Directive({
  selector: '[formControlName][appAmountMask]'
})
export class AmountMaskDirective implements OnInit {
  private hasFocus = false;

  private element: HTMLInputElement;

  private digits = '1.0-7';

  constructor(
    private elementRef: ElementRef,
    private control: NgControl,
    private decimalPipe: DecimalPipe
  ) {}

  public ngOnInit(): void {
    this.element = this.elementRef.nativeElement;
  }

  @HostListener('focus', ['$event.target.value'])
  public onFocus(value: string): void {
    this.hasFocus = true;
    this.element.value = this.removeComma(value);
  }

  @HostListener('blur', ['$event.target.value'])
  public onBlur(value: string): void {
    this.hasFocus = false;

    const commaValue =
      parseFloat(value) < 1 && parseFloat(value) > 0
        ? value
        : this.decimalPipe.transform(value.trim(), this.digits);
    if (this.control) {
      this.control.control.patchValue(value);
      this.element.value = commaValue;
      return;
    }

    this.element.value = commaValue;
    const v = this.removeComma(this.element.value);
    this.control.control.patchValue(v);
  }

  private removeComma(target: string): string {
    return target.replace(/,/g, '');
  }
}