title: Angular table row contains sum of columns dynamically using Reactive Forms
body: <p>i'm working in angular project where i want to show a table with two columns and dynamic row and last row conatins sum of each column when user type any number , this is what i want to achieve :</p>
  
  <pre><code>element | FR | EN |
  -------------------
  elem A  |    |    |
  -------------------
  elem B  |    |    |
  -------------------
  elem C  |    |    |
  -------------------
  Total   |    |    |
  </code></pre>
  
  <p>and this is my angular code : 
   componenet.ts : </p>
  
  <pre><code>listDecompositionLibelle: string[] = ['elem A', 'elem B','elem C'];
  
  ngOnInit() {
  
      this.valuesForm = this.fb.group({
            decomposition : this.fb.array([
            ])
      });
  
      for (let i = 0; i &lt; 3; i++) {
            this.addDecompositionLigne(this.listDecompositionLibelle[i]);
      }
  }
  
  // function to add element to array
   addDecompositionFormGroup(typeDecomposition): FormGroup {
                   return this.fb.group({
                    type: [typeDecomposition],
                    frVal: [''],
                    enVal: ['']
                   });
   }
  
   // function to push my array
  addDecompositionLigne(typeDecomposition) {
             (&lt;FormArray&gt;this.valuesForm.get('decomposition')).push(this.addDecompositionFormGroup(typeDecomposition));
  }
  </code></pre>
  
  <p>and this is my html code : </p>
  
  <pre><code>&lt;table class="table table-bordered" formArrayName="decomposition"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
              &lt;th&gt;element&lt;/th&gt;
              &lt;th&gt;FR&lt;/th&gt;
              &lt;th&gt;EN&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let decomposition of valuesForm.get('decomposition ').controls;let i=index" [formGroupName]="i" &gt;
            &lt;td&gt;
                {{listDecompositionLibelle[i]}}
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type='text' class="form-control" formControlName="frVal" [id]="'frVal'+i"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type='text' class="form-control" formControlName="enVal" [id]="'enVal'+i"&gt;
              &lt;/td&gt;
              &lt;td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  &lt;/table&gt;
  // i want to add a row that calculte the sum of the values in each column of my table
  </code></pre>
  
  <p>do you have any idea on how to add a row that calculate dynamically the sum of values in each column when the user start to type a value in the inouts?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Best Regards.</p>