title: Multiply Input Boxes Value in PrimeNg Angular6
body: <p>I am using PrimeNg 6.1.5 and Angular 6. I am using PrimeNg table for displaying the data and also the table consists of three input boxes a,b and we need to multiply those values and insert into another input box.</p>
  
  <p><a href="https://i.stack.imgur.com/vQruY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vQruY.png" alt="enter image description here"></a></p>
  
  <p>My Code:</p>
  
  <pre><code>&lt;div class="primetable" style="box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);"&gt;
      &lt;p-table [value]="student"
          [columns]="cols"
          #dt
          class="primetable"
          [paginator]="true"
          [rows]="15"&gt;
          &lt;ng-template pTemplate="caption"&gt;
              &lt;div&gt;
                  &lt;input type="text"
                      class="form-control"
                      pInputText
                      size="50"
                      placeholder="Search Data Here"
                      (input)="dt.filterGlobal($event.target.value, 'contains')"
                      style="width:auto"&gt;
              &lt;/div&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate="header"
              let-columns&gt;
              &lt;tr&gt;
                  &lt;th style="padding: 15px 15px;color: #1e6bb8;background: white"
                      *ngFor="let col of columns"&gt;{{col.header}}&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate="body"
              let-student
              let-i="rowIndex"
              let-columns="columns"&gt;
              &lt;tr [pSelectableRow]="student"&gt;
                  &lt;td &gt;{{i+1}}&lt;/td&gt;
                  &lt;td&gt;{{student.regnum}}&lt;/td&gt;
                  &lt;td&gt;{{student.name}}&lt;/td&gt;
                  &lt;td&gt;&lt;input id="a" class="form-control" name="valuea" type="number" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input id="b" class="form-control" name="valueb" type="number" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input id="ab" class="form-control" name="mulvalue" type="number" value="" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
      &lt;/p-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ts Code:</p>
  
  <pre><code>    ngOnInit() {
      this.http.get('http://localhost:3000/api/student/studentslist').subscribe(res =&gt; {
        let data = res.json();
        this.student = data;
      });
  
      this.cols = [
        { field: 'S.No', header: 'S.No' },
        { field: 'regnum', header: 'Regnum' },
        { field: 'name', header: 'Name' },
        { field: 'a', header: 'a' },
        { field: 'b', header: 'b' },
        { field: 'ab', header: 'a*b' },
        { field: 'Options', header: 'Options' }
    ];
    }
  </code></pre>
  
  <p>Thanks in Advance</p>
  
  <p><strong>Edit:</strong> After Trying @sunil singh answer this is my output:
  <a href="https://i.stack.imgur.com/1a0d7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1a0d7.png" alt="enter image description here"></a></p>
  
  <p>Its Calcuting value for all the text boxes at the start of page itself and giving it as 0 but I shouldn't have any value there in A*B textbox.</p>
  
  <p><strong>Debugging Mode:</strong> As advised by @sunil singh I have used Debugging Mode
  <a href="https://i.stack.imgur.com/Wm3Ql.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wm3Ql.png" alt="enter image description here"></a></p>
  
  <p><strong>Working Code:</strong> Thanks a lot @Sunil Singh</p>
  
  <pre><code>&lt;tr [pSelectableRow]="student"&gt;
                  &lt;td &gt;{{i+1}}&lt;/td&gt;
                  &lt;td&gt;{{student.regnum}}&lt;/td&gt;
                  &lt;td&gt;{{student.name}}&lt;/td&gt;
                  &lt;td&gt;&lt;input id="a" #first class="form-control" name="valuea" type="number" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input id="b" #second class="form-control" name="valueb" type="number"/&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input id="ab" class="form-control" name="mulvalue" type="number" [value]="(first.value &amp;&amp; second.value) ? (+first.value * +second.value) : ''" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-green"
                          style="font-size: 15px;color: #1e6bb8"
                          (click)="editbutton(student)"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button class="btn btn-danger"
                          style="font-size: 15px;"&gt;&lt;i class="fa fa-trash-o fa-spin-hover"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button class="btn btn-primary" (click)="gotoprofile(student)"
                          style="font-size: 15px;"&gt;&lt;i class="fa fa-eye fa-spin-hover"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>