In Angular material I want to calculate two mat-cell input value and show it in another mat-cell (in Dynamically added Columns)

Question

I have created a mat-table in which Columns are dynamically added. Now I want to run the operation in my two columns (Unit Price * Qty/Rolls) and show results on Amount columns. In footer I want to show the total Qty/Rolls and amount. here is What I have done soo far: stackblitz code

My HTML Code

<mat-table [dataSource]="rows" matSort matSortActive="symbol" matSortDirection="asc">

  <ng-container matColumnDef="{{column}}" *ngFor="let column of columns; let i = index;">

    <span *ngIf="i === 0 ">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        SN
      </mat-header-cell>
      <mat-cell *matCellDef="let element; let sn=index">
        {{sn+1}}
      </mat-cell>
    </span>
    <span *ngIf="i !== 0 && i<colLenght-3">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element;">
        {{element[column]}}
      </mat-cell>

    </span>
    <span *ngIf="i !== 0 && i>=colLenght-1">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" [(ngModel)]="element[column]">
        </mat-form-field>
      </mat-cell>
    </span>
    <span *ngIf="i !== 0 && i>=colLenght-2">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" (change)="calculate(i)" [(ngModel)]="element[column]">
        </mat-form-field>
      </mat-cell>
    </span>
    <span *ngIf="i !== 0 && i>=colLenght-3">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" (change)="calculate(i)" [(ngModel)]="element[column]">
        </mat-form-field>
      </mat-cell>
    </span>

  </ng-container>

  <mat-header-row *matHeaderRowDef="columns; sticky: true;"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columns;"></mat-row>

</mat-table>

<button id="hide" add mat-raised-button color="accent">Get Checked Items</button>

Ts Code:

  @Input()
  public content: any;
  colLenght: number;
  public rows = new MatTableDataSource<any>();
  public columns = [];
  dataSource = [
    {
      SalesOrderId_Hide: 11,
      ItemId: 11,
      SlNo: 1,
      'Item Name': 'Barcode Label',
      'Description Of Goods': '4"X 3" Type: Mat Fasoin',
      'Qty/Rolls': 5,
      'Unit Price': 5,
      Amount: 9
    }
  
  ];


  private updateRows(): void {
    this.rows = new MatTableDataSource<any>(this.content);
    
  }

  private updateColumns(): void {
    debugger;

    for (const column of Object.keys(this.content[0])) {
      this.columns.push(column);
    }
    this.colLenght = this.columns.length;
  }

  private updateTable(): void {
    if (this.content) {
      this.updateRows();
      this.updateColumns();
    }
  }

  public showFamilies(): void {}
  ngOnInit(): void {
    this.content = this.dataSource;
    this.updateTable();
  }

  calculate(i) {
    console.log(i);
  }
  constructor() {}

Answer 1

Using the example from Angular Material, you can set your calculate formula in your ts file to:

calculate(i: number) {
    return this.dataSource[i].Amount * this.dataSource[i].UnitPrice
  }

Then in your html file, you can interpolate it:

    <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput>{{calculate(i)}}
        </mat-form-field>
    </mat-cell>

Note that I did need to change 'Unit Price' to UnitPrice.

EDIT
On the assumption that the data under "Qty/Rolls" and "Unit Price" will always be the basis for your calculation, I passed the full element's contents to calculate:

<span *ngIf="i !== 0 && i>=colLenght-1">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
        {{column | fieldToDisplay}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-form-field floatLabel="never">
          <input matInput placeholder [value]="element[column]" [(ngModel)]="element[column]"> {{calculate(element)}}<!--Here-->
        </mat-form-field>
      </mat-cell>
    </span>

And then in the ts file, calculated as follows:

calculate(el: any) {
    if (el["Qty/Rolls"] && el["Unit Price"]) {
      var a: number = el["Qty/Rolls"];
      var b: number = el["Unit Price"];
      var c: number = a * b;
      console.log("Amount: "+c);//or: return c
    }
  }