How to have thousand separator and decimal separator at once in ngx mask using angular7?

Question

I have an angular7 app in which i have an input on which i have to apply mask using ngx-mask.

I have the input like this

<input matInput mask="separator.2" thousandSeparator=","  [(ngModel)]="currency">

It gives me result like this

3,000,000,000,000

But i want the result like this

3,000,000,000,000.00

That means i also want .00 formatting at the end of the value entered. and if user entered this value

3,000,000,000,000.345

so that value preserves, and i don't want .00 then because .345 is already there.

Stackblitz link is here

Answer 1

I found the answer in this link: https://stackblitz.com/edit/ngx-mask-separator?file=src%2Fapp%2Fapp.component.html

<input type="text" [(ngModel)]="anotherMask" [mask]="'0*.00'" />

Another example. I needed to use something like this

<input type="text" [(ngModel)]="anotherMask" [mask]="'0000.000'" />

Answer 2

think the solution in this example might help you. Found it while looking for a similar solution.

https://stackblitz.com/edit/ngx-mask-decimal?file=src%2Fapp%2Fapp.component.ts

Uses the blur event to "fix" your input with adding the missing decimals (if missing)