How to force binding property through custom mask in Angular 5

Question

I am dealing with masking some inputs to be a currency format. I found a nice plugin which works fine at the moment.

Every time something is written in the <input> using the keyboard the mask work just fine.

But I have a selection of buttons underneath the input label which provides some default "hint" values for the user to click.

When one of this buttons is clicked I am calling click() callback to bind the property behind, and that is working but the mask is not being applied.

How can I update the input to apply the mask to the binding property??

I am using Ionic framework 3, angular 5

my html:

<form [formGroup]="ammountForm">
    <ion-item class="input-item">
      <ion-input type="tel" [textMask]="{mask: ammountMask, guide: false}" placeholder="Ingresa el valor" formControlName="ammount"
        [(ngModel)]="ammount"></ion-input>
    </ion-item>

    <ion-item class="err-hint" no-lines *ngIf="ammountForm.controls.ammount.invalid">
      <p>La cantidad ingresada no es correcta</p>
    </ion-item>

    <ion-slides>
      <ion-slide class="def-slide" *ngFor="let ammount of defaultAmmounts">
        <button (click)="onSlideClick(ammount)" class="slide-btn" ion-button color="light-blue-grey" outline>${{ammount}}</button>
      </ion-slide>
    </ion-slides>
    <button class="continue-btn" color="cornflowerblue" [disabled]="ammountForm.controls.ammount.invalid" ion-button [full]="isMobile ? '' : null"
      (click)="triggerPhase4(phoneNumber)">Continuar</button>
  </form>

this is where I pass the mask (ammountMask) to the input:

<ion-input type="tel" [textMask]="{mask: ammountMask, guide: false}" placeholder="Ingresa el valor" formControlName="ammount"
    [(ngModel)]="ammount"></ion-input>

and the call back in my ts file, where the binding happens:

onSlideClick(ammount: number) {
   this.ammount = ammount;
}

here are some pictures to give you an idea.

Any ideas on how to address this matter will be highly appreciated

EDIT: this is where I declare the masks to use

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

ngOnInit() {
this.phoneMask = BdbMaskProvider.phoneMask;
this.ammountMask = createNumberMask({})
}

Answer 1

Thanks to @DainiusLuksa for pointing out the issue,

I got another work around suggested on the same thread

https://github.com/text-mask/text-mask/issues/696

I had to modify the syntax to access the native element of an ionic component:

@ViewChild('ammountRef', { read: ElementRef}) inputElement: any;

onSlideClick(ammt: number) {
//set value to form control in order get the validators
this.ammountForm.controls['ammount'].setValue(ammt);

//fire event to force new input through mask
if (this.inputElement != undefined) {
  const input = this.inputElement.nativeElement;
  input.value = ammt;
  input.dispatchEvent(new Event('input'));

}
}

and in Html add the selector:

<ion-input id="ammtRef" type="tel" [textMask]="{mask: ammountMask, guide: false}" placeholder="Ingresa el valor" formControlName="ammount"
        #ammountRef></ion-input>

If you are working with FormGroup make sure you set the value programatically as well, as the validators won't work just by setting the input element