Currency Mask (Angular) not working without direct input

Question

I have several input fields (number), being the last one (disabled) the result of they're sum or subtraction. All of them have currency mask, including the total field. The issue is that when filling them, the total field won't assume the decimals, only if I enabling it, type a number. Then the decimals appear. Can someone help to solve the issue?

HTML:

 <div class="row">
              <div class="col-md-4">
                <input [(ngModel)]="mainBudget.budget.own_resources" class="form-control" placeholder="{{dataResources.placeholder.euro}}"
                  type="text" currencyMask required>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <input [(ngModel)]="mainBudget.budget.revenues_generated_by_project" class="form-control" type="text" currencyMask placeholder="{{dataResources.placeholder.euro}}"
                  required>
              </div>
            </div>

 <div class="row">
              <div class="col-md-4">
                <input class="form-control disabled" disabled  type="text" currencyMask [value]="totalBudget()" placeholder="{{dataResources.placeholder.euro}}"
                  required>
              </div>
            </div>

The sum method:

 totalBudget(): number {
        return this.mainBudget.budget.own_resources +
          this.mainBudget.budget.revenues_generated_by_project;

      }

Answer 1

I got it working with ngModel, like this:

TS

total:number;

 totalBudget(): boolean{
        this.total = this.mainBudget.budget.own_resources +
          this.mainBudget.budget.revenues_generated_by_project;
        return true ;
      }

HTML

<div class="row">
              <div class="col-md-4" *ngIf="totalBudget()"> 
                <input class="form-control"  type="text" disabled currencyMask [(ngModel)]="total"
                  required>
              </div>
            </div>