Angular : ERROR RangeError: Maximum call stack size exceeded message when I type in inputs

I'm getting ERROR RangeError: Maximum call stack size exceeded message in console when I type something in one of this inputs

app.component.html

<div class="container-wrap">
    <div class="container">
        <input type="number" [formControl]="input1">
        <input type="number" [formControl]="input2">
    </div>
</div>

app.component.ts

constructor() { }

  input1:FormControl=new FormControl();
  input2:FormControl=new FormControl();

  ngOnInit(): void {

    this.input1.valueChanges
    .pipe(tap(value=>{
      this.input2.setValue(value);
    })).subscribe();

    this.input2.valueChanges
    .pipe(tap(value=>{
      this.input1.setValue(value);
    })).subscribe();

  }

Looks like typing in one of my inputs calls endless valueChanges loop in app.

I want to make when I type in iput1 something it types in input2 and also when I type in input2 it will change input in input1.

how to fix this?

You can pass an extra argument to setValue which should stop your valueChanges being run on the value you are editing.

this.input1.valueChanges
    .pipe(tap(value=>{
      this.input2.setValue(value, { emitEvent: false });
    })).subscribe();
    

this.input2.valueChanges
    .pipe(tap(value=>{
      this.input1.setValue(value, { emitEvent: false });
    })).subscribe();