Get sum of cells in table with dynamic rows and columns in angular

I'm trying to build an application that functions similar to an excel sheet for the purpose of saving monthly bill payments for tenants of an apartment complex. The cell headers and rows will be retrieved from an API. So if there are currently only 3 types of bills to be paid (e.g: electricity, water, gas) there will be 3 columns, and if there are currently 3 tenants in the complex there will be 3 rows. The HTML table will be editable for the user to input the bill value for each tenant for each bill type. The problem I'm facing is that I need to sum the values of each tenant for each bill type dynamically as I don't know how many tenants there will be.

Here is the HTML code for the table:

<table> <tr> <th></th> <th *ngFor="let billType of this.data.billTypes">{{ billType }}</th> </tr> <tr *ngFor="let tenant of this.data.tenants"> <td>{{ tenant }}</td> <td *ngFor="let billType of this.billTypes"> <input id="{{tenant + billType}}" value="0" type="number"> </td> </tr> <tr> <td>Total</td> <td id="{{billType + 'total'}}" *ngFor="let billType of this.data.billTypes">0</td> </tr> </table>

Which produces this:

How do I approach getting the sum of a column and row when changing the input of a cell?