title: How to update my total when I have quantity * price in typescript
body: <p>In this code I implement to add sale, in one sale I have and produts, these products I has in an array Products, and display in this table. My problem is, when I add some products, my value, price, quantity and total display ok, but I can't change my total automatic when I can change quantity or price. I tired to use [(ngModel)] in [Value] I can change my total, but my value are  the same, like in photo
  <a href="https://i.stack.imgur.com/CyzBe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CyzBe.png" alt="enter image description here"></a></p>
  
  <p>Edit code html</p>
  
  <pre><code> &lt;form [formGroup]="addsale" (ngSubmit)="onaddsale()"&gt;
  
            &lt;tr class="group" style="cursor: pointer" *ngFor="let item of products; let i = index"&gt;
               &lt;td&gt;
                &lt;input formControlName="Unit_price" id="Unit_price " type="number" class="validate"[value]="item.Unit_price"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input formControlName="Quantity" id="Quantity " type="number" class="validate"  [value]="item.Quantity"&gt; 
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type="text" formControlName="Description" id="Description" name="Description" [value]="item.Description"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input formControlName="Subtotal" id="Subtotal" type="number" class="validate"  [value]="item.Subtotal"&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div class="row"&gt;
          &lt;div class="input-field col s2" style="float: right;"&gt;
            &lt;label for="total"&gt;Total {{total}} ALL&lt;/label&gt;
            &lt;input formControlName="total" id="total" type="text" class="validate"   [value]="total"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>For <code>{{total}}</code> I call this function in ts:</p>
  
  <p>Code ts:</p>
  
  <pre><code>        this.addsale = this.fb.group({
            'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
            'amount_paid': new FormControl('', Validators.required),
            'notes': new FormControl('', Validators.required),
            'Subtotal': new FormControl('', Validators.required),
            'products': this.fb.array([]),
            'total': new FormControl('', Validators.required),
            'Unit_price': new FormControl('', Validators.required),
            'Quantity': new FormControl('', Validators.required),
            'Description': new FormControl('', Validators.required)
          });
        }
  
        ngOnInit() {
  
          this.products = this.ps.getProduct();
          console.log(this.products)
  
          this.pts.getAllProductType().subscribe(
            producttype =&gt; {
              this.producttype = producttype;
            }
          );
        }
  
  
        onaddsale() {
  
        }
  
        get total() {
          let Total = 0;
          for (let p of this.products) {
            Total += p.Unit_price * p.Quantity;
          }
          return Total;
        }
          }
  </code></pre>
  
  <p>Can you suggest me how to implement update total when I change quantity or unie_price?</p>
  
  <p>Thank you</p>