FormArray total of each formgroup via RxJS
Do I have any memory leaks?


No



Why is it if I stick debounceTime(1) inside the lineItem valueChanges then this stops working where the calculation is out by the last change?



  Beacuse debounceTime(1) delays the response by 1ms inside the lineItem
  and this.linesChange.emit(value['lines']);  is already run with old
  total


The implementation below will sort your problems.

  getLineFormGroup(): FormGroup {
    let lineItem = this.fb.group({
      quantity: new FormControl(),
      rate: new FormControl(),
      total: new FormControl()
    });
    lineItem.valueChanges.pipe(
      takeUntil(this.destroyed$),
      debounceTime(20)
    ).subscribe(value =&gt; 
      { 
        console.log("should be called first")
        this.calcTotal(lineItem)

        if (!this.formGroup.valid) {
          return;
        }
        this.linesChange.emit(this.formGroup.value['lines']);
      }
    )
    return lineItem
}



Why is it if I remove the {emitEvent: false} and put in a debounceTime as above the total stops working altogether?



  The lineItem.valueChanges observable will fire in a circular fashion
  when you remove this {emitEvent: false}.
  line.controls['total'].setValue() will fire lineItem.valueChanges
  again. Which in-turn crashes the app and stop.



Should i be using some other way like combineLatest? If so how do I collect the valueChanges observables (I'll figure it out from here if this is required)?



  I would suggest not required