Multiply Input Boxes Value in PrimeNg Angular6

Question

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.

My Code:

<div class="primetable" style="box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);">
    <p-table [value]="student"
        [columns]="cols"
        #dt
        class="primetable"
        [paginator]="true"
        [rows]="15">
        <ng-template pTemplate="caption">
            <div>
                <input type="text"
                    class="form-control"
                    pInputText
                    size="50"
                    placeholder="Search Data Here"
                    (input)="dt.filterGlobal($event.target.value, 'contains')"
                    style="width:auto">
            </div>
        </ng-template>
        <ng-template pTemplate="header"
            let-columns>
            <tr>
                <th style="padding: 15px 15px;color: #1e6bb8;background: white"
                    *ngFor="let col of columns">{{col.header}}</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body"
            let-student
            let-i="rowIndex"
            let-columns="columns">
            <tr [pSelectableRow]="student">
                <td >{{i+1}}</td>
                <td>{{student.regnum}}</td>
                <td>{{student.name}}</td>
                <td><input id="a" class="form-control" name="valuea" type="number" /></td>
                <td><input id="b" class="form-control" name="valueb" type="number" /></td>
                <td><input id="ab" class="form-control" name="mulvalue" type="number" value="" /></td>
            </tr>
        </ng-template>
    </p-table>
</div>

Ts Code:

    ngOnInit() {
    this.http.get('http://localhost:3000/api/student/studentslist').subscribe(res => {
      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' }
  ];
  }

Thanks in Advance

Edit: After Trying @sunil singh answer this is my output:

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.

Debugging Mode: As advised by @sunil singh I have used Debugging Mode

Working Code: Thanks a lot @Sunil Singh

<tr [pSelectableRow]="student">
                <td >{{i+1}}</td>
                <td>{{student.regnum}}</td>
                <td>{{student.name}}</td>
                <td><input id="a" #first class="form-control" name="valuea" type="number" /></td>
                <td><input id="b" #second class="form-control" name="valueb" type="number"/></td>
                <td><input id="ab" class="form-control" name="mulvalue" type="number" [value]="(first.value && second.value) ? (+first.value * +second.value) : ''" /></td>
                <td>
                    <button class="btn btn-green"
                        style="font-size: 15px;color: #1e6bb8"
                        (click)="editbutton(student)"><i class="fa fa-pencil"></i></button>
                    <button class="btn btn-danger"
                        style="font-size: 15px;"><i class="fa fa-trash-o fa-spin-hover"></i></button>
                    <button class="btn btn-primary" (click)="gotoprofile(student)"
                        style="font-size: 15px;"><i class="fa fa-eye fa-spin-hover"></i></button>
                </td>
            </tr>

Answer 1

Use the ElementRef to solve this kind of issue.

<td><input #first class="form-control" name="valuea" type="number" /></td>
<td><input #second class="form-control" name="valueb" type="number" /></td>
<td><input [value]="(first.value && second.value) ? (+first.value + +second.value) : ''"  class="form-control" name="mulvalue" type="number" value="" /></td>

Debugging version

<td><input #first class="form-control" name="valuea" type="number" /> {{first.value}}</td>
<td><input #second class="form-control" name="valueb" type="number" />{{second.value}}</td>
<td><input [value]="(+first.value + +second.value)" class="form-control" name="mulvalue" type="number" value="" />{{(+first.value + +second.value)}}</td>

note + is appended to convert string to int in expresion +first.value + +second.value