How Do I Bind The Data In An Input Field To Another Input Field On Angular?

I am working on an Angular project and I have two input fields , I want the value that is put in the first input field (field1) to show in the other input (field2) but multiplied b

Solution 1:

<divclass="field1"><labelfor="fieldinput1"><b>
   Amounts  </b><spanclass="dpspan">*</span></label><br/><inputname="fieldinput1" [ngModel]="input1" (ngModelChange)="getChange($event)"min="0.5"max="5000"placeholder="000"type="number"height="70px"required></div><br/><divclass="field2"><labelfor="fieldinput2"><b>
        Total Income Returns </b><spanclass="Incspan">*</span></label><br/><inputname="fieldinput2" [ngModel]="input2"readonlytype="text"required>

in your ts file

  input1;
  input2;
  getChange(event){
   this.input2=event*2
  }

another example here

import { Component, OnChanges, DoCheck } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input [ngModel]="name" (ngModelChange)="getChange($event)" placeholder="type here" type="text">
    <input [ngModel]="input2" readOnly>
  `
})
export classAppComponent{
  name=2;
  input2=this.name*2;

  getChange(event){
    this.input2=parseInt(event)*2
  }
}

Solution 2:

    <div class="field1">
  <labelfor="fieldinput1"><b>
      Amounts </b><spanclass="dpspan">*</span></label><br /><inputname="fieldinput1" [(ngModel)]="data.input1" (change)="changeSecondInput()"min="0.5"max="5000"placeholder="000"type="number"height="70px"required></div><br /><divclass="field2"><labelfor="fieldinput2"><b>
      Total Income Returns </b><spanclass="Incspan">*</span></label><br /><inputname="fieldinput2" [(ngModel)]="data.input2"readonlytype="text"required></div>

and inside ts

1.declare oblect like

public data={
input1:number,
input2:number
};

2.change function like

changeSecondInput(){
this.data.input2=parseInt(this.data.input1)*2

}