(ngModelChange) not triggers the function in Angular 2+

Question

I have two input fields and when I enter any number value in input field 1 (dummy1) it should update the input field 2 (dummy2). Once input field 2 is updated, it should trigger the successMessage(). But it is not happening. the value is getting changed in input 2(dummy2). But the successMessage() function is not triggered. I thought (ngModelChange) would trigger the function as the dummy2 value is updated in updateDummy2() function. please let me know if any ways to call the successMessage() function when dummy2 value is updated by the dummy1.

Component.html

<div id="dummyWrapper">
  <input id="dummy1" type="text"  [(ngModel)]="dummy1" (ngModelChange)="updateDummy2()" />
  <input id="dummy2" type="text"  [(ngModel)]="dummy2" (ngModelChange)="successMessage()" />
</div>

Component.ts

public dummy1 = 0;
public dummy2 = 0;




updateDummy2() {
    console.log("updateDummy2")
    this.dummy2 = Number(this.dummy1) + 20;
  }

  successMessage() {
    console.log("success")
  }

Or should I go for the subscription.

Answer 1

This is a two way binding, so below code will not take effect. Use property binding instead.

[(ngModel)]="trait.userMinimum"  
(ngModelChange)="setThresholds()

Or make use of getter setter