Angular infinity loop to update data in firestore

I am new to angular. When i submit a form it will call onBuyStock() to insert the input value to BuyHistory collection then i will need to update value in OverviewStock collection. The problem happen here, since i need to get the current value from OverviewStock collection and do the increment. i call this.stockService.GetOverviewStock() and subscribe to it. When i want to update the value using response[0].Quantity + 1 in the subscribe() method, it will result in infinity loop to update the document.

Any Solution???

html

<mat-card class="mat-elevation-z8">
    <mat-card-header>
        <mat-card-title>Buy Stock</mat-card-title>
    </mat-card-header>

    <mat-card-content>
        <form [formGroup]="form" (submit)="onBuyStock()" #formDirective="ngForm">

            <div>
                <mat-form-field class="example-full-width">
                    <input matInput type="text" placeholder="Stock Name" aria-label="Number" formControlName="StockName"
                        [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let option of stockNameOptions" [value]="option">
                            {{option}}
                        </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
            </div>

            <div>
                <mat-form-field>
                    <input matInput type="number" placeholder="Price" aria-label="Number" formControlName="Price"
                        min="0" (keyup)="onCalculateNetBuy()">
                </mat-form-field>
            </div>

            <div>
                <mat-form-field>
                    <input matInput type="number" placeholder="Qty" aria-label="Number" formControlName="Quantity"
                        min="1" (keyup)="onCalculateNetBuy()">
                </mat-form-field>
            </div>

            <button mat-raised-button color="buy" type="submit" fxFlexFill>Buy</button>
        </form>
    </mat-card-content>
</mat-card>

component.ts

....
...

onBuyStock() {
    if (this.form.invalid) {
      return;
    }

    this.InsertDataIntoBuyHistory({
      StockName: this.form.value.StockName,
      Quantity: this.form.value.Quantity,
      UnitPrice: this.form.value.Price,
      BuyDate: new Date(),
      Brokerage: this.brokerage,
      Tax: this.tax,
      StampDuty: this.stampDuty,
      ClearingFee: this.clearingFee,
      TotalExtraCost: this.totalExtraCost,
      TotalBuyCost: this.netBuy,
    });

    this.testName = this.form.value.StockName
    this.stockService.GetOverviewStock().subscribe((response) => {
      response = response.filter((item) => {
        return item.StockName == this.testName;
      });
      this.firestore
        .collection("OverviewStock")
        .doc(this.testName)
        .set(
          {
            StockName: response[0].StockName,
            Quantity: response[0].Quantity + 1,
            TotalMoneySpent: this.testPrice,
          },
          { merge: true }
        );
    });

    this.form.reset();
    this.formDirective.resetForm();
}

  private InsertDataIntoBuyHistory(data: BuyHistory) {
    this.firestore.collection("BuyHistory").add(data);
  }

stockService.ts

  GetOverviewStock() {
    return this.firestore
      .collection<StockModel>("OverviewStock", (ref) => ref.orderBy("StockName", "asc"))
      .valueChanges();
  }

Source: Angular Questions