[Fixed] Update table cell value on button click in Angular

Issue

I have a bootstrap table. Just before the table I have a button and a textbox. After input any number in the textbox and click on the generate button, I want to update the "Bill Amount" column of each row with the textbox value. How can I do this?

<div>
Amount : <input type="number" class="form-control" id="amount" name="amount" placeholder="Amount">
<button type="button" class="btn btn-primary" (click)="generateBill()">Generate</button>
</div>

<table class="table table-striped table-bordered">
<thead>
    <tr>                    
        <th scope="col">#</th>
        <th scope="col"><input type="checkbox" [checked]="isAllCheckBoxChecked()" (change)="checkAllCheckBox($event)"></th>
        <th scope="col">Code</th>
        <th scope="col">Name</th>
        <th scope="col">Type</th>
        <th scope="col">Category</th>
        <th scope="col">Shop No</th>
        <th scope="col">Shop Name</th>                                        
        <th scope="col">Bill Amount</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let member of memberBillLists; let i = index">
        <td scope="row">{{ member.Id }}</td>
        <td scope="row"><input type="checkbox" value="{{member.Id}}" [(ngModel)]="memberBillLists[i].Checked"></td>
        <td>{{member.Code}}</td>
        <td>{{member.Name}}</td>
        <td>{{member.Type}}</td>            
        <td>{{member.Category}}</td>
        <td>{{member.ShopNo}}</td>
        <td>{{member.ShopName}}</td>
        <td><input type="number" class="form-control" [(ngModel)]="memberBillLists[i].BillAmount"></td>
    </tr>
</tbody>
</table>

Solution

You bind the input to a variable in your component file using two way binding. Then inside the generateBill() method you access memberBillLists array and update the bill amount with the amount you get from the two way binded value.