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:

 <div class="field1">
 <label for="fieldinput1"><b>
   Amounts  </b>
  <span class="dpspan">*</span>
   </label><br/>
<input name="fieldinput1" [ngModel]="input1" (ngModelChange)="getChange($event)" min="0.5" max="5000" placeholder="000" type="number" height="70px" 
  required>
</div><br/>

<div class="field2">
   <label for="fieldinput2"><b>
        Total Income Returns </b>
     <span class="Incspan">*</span>
        </label><br/>
 <input name="fieldinput2" [ngModel]="input2" readonly type="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 class AppComponent    {
  name=2;
  input2=this.name*2;

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

Solution 2:

    <div class="field1">
  <label for="fieldinput1"><b>
      Amounts </b>
    <span class="dpspan">*</span>
  </label><br />
  <input name="fieldinput1" [(ngModel)]="data.input1" (change)="changeSecondInput()" min="0.5" max="5000"
    placeholder="000" type="number" height="70px" required>
</div><br />

<div class="field2">
  <label for="fieldinput2"><b>
      Total Income Returns </b>
    <span class="Incspan">*</span>
  </label><br />
  <input name="fieldinput2" [(ngModel)]="data.input2" readonly type="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

}