How to remove decimal value after the input is formatted based on focus out in angular8

Question

i have used currency pipe for formatting the input, but i get .00, when i come out of the input fields, but i want $1,000,000 (no decimals, including commas as necessary and show $ sign) but now i am getting it like this, if i type 1000000 and it shows as $1,000,000.00, but i want this to be $1,000,000.

HTML:

 <input type="text" class="form-control" placeholder="Amount in dolars"
            formControlName="amount" autocomplete="off" currencyInput maxDigits="9">

Directive:

private regexString(max?: number) {
    const maxStr = max ? `{0,${max}}` : `+`;
    return `^(\\d${maxStr}(\\.\\d{0,2})?|\\.\\d{0,2})$`
  }
  private digitRegex: RegExp;
  private setRegex(maxDigits?: number) {
    this.digitRegex = new RegExp(this.regexString(maxDigits), 'g')
  }
ngOnInit() {
    this.el.value = this.currencyPipe.transform(this.el.value, 'USD');
  }

  @HostListener("focus", ["$event.target.value"])
  onFocus(value) {
    // on focus remove currency formatting
    this.el.value = value.replace(/[^0-9.]+/g, '')
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    // on blur, add currency formatting
    this.el.value = this.currencyPipe.transform(value, 'USD');
  }

During copy paste and when we come out, even that time also, i want the format to be as mentioned, but i tried using, symbol:"1-0.0" and all but nothing worked.

Please help

DEMO

Answer 1

Demo

just put this on blur after transform

var lasttrim=this.el.value.substr(-2);
if(lasttrim=="00"){
      this.el.value=this.el.value.substr(0,this.el.value.length-3)
}

your host event will be like that

@HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    // on blur, add currency formatting
    this.el.value = this.currencyPipe.transform(value, 'USD');
     var lasttrim=this.el.value.substr(-2);
     if(lasttrim=="00"){
         this.el.value=this.el.value.substr(0,this.el.value.length-3)
     }
  }