mat-footer-cell is not rendered

Question

I created angular material tables using ngFor in my angular 13 project and I want to display the footer in two of the columns only.

The mat-header-cell and mat-cell is display as expected. But mat-footer-cell is not displayed. When I inspect in the Element tab of DevTools there is not mat-footer-cell element. Here is html code.

<mat-card  *ngFor="let source of dataSource">
      <mat-card-content>
      <mat-card>
        <!-- <mat-card-header>
          <mat-card-title></mat-card-title>
        </mat-card-header> -->
        <mat-card-content>
      <mat-table  [dataSource]="source.data" matSort>
        <!-- Account No Column -->
        <ng-container matColumnDef="accountNo">
          <mat-header-cell *matHeaderCellDef>Account No</mat-header-cell>
          <mat-cell *matCellDef="let element; let i = index">
            <span *ngIf="i == 0">{{source.accountNo}} </span>
          </mat-cell>
        </ng-container>

        <!-- accountDetails Column -->
        <ng-container matColumnDef="accountDetails">
          <mat-header-cell *matHeaderCellDef> Account Details</mat-header-cell>
          <mat-cell *matCellDef="let element; let i = index"> <span *ngIf="i == 0">{{source.accountName}} </span> </mat-cell>
        </ng-container>

        <!-- DateColumn -->
        <ng-container matColumnDef="date">
          <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.date | date: "shortDate"}} </mat-cell>
        </ng-container>

        <!-- transactionDetails Column -->
        <ng-container matColumnDef="transactionDetails">
          <mat-header-cell *matHeaderCellDef> Transaction Details</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.detail}} </mat-cell>
        </ng-container>

        <!-- debit Column -->
        <ng-container matColumnDef="debit">
          <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span *ngIf="element.debitAccountNo == source.accountNo">
              {{element.amount}}
            </span>
           </mat-cell>
           <mat-footer-cell *matFooterCellDef> Sum </mat-footer-cell>
        </ng-container>

        <!-- credit Column -->
        <ng-container matColumnDef="credit">
          <mat-header-cell *matHeaderCellDef>Credit </mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span *ngIf="element.creditAccountNo == source.accountNo">
              {{element.amount}}
            </span>
          </mat-cell>
          <mat-footer-cell *matFooterCellDef> Sum </mat-footer-cell>
        </ng-container>

        <!-- Balance Column -->
        <ng-container matColumnDef="balance">
          <mat-header-cell *matHeaderCellDef>Balance</mat-header-cell>
          <mat-cell *matCellDef="let element">
            {{calcBalance(element.debitAccountNo, element.creditAccountNo, source.accountNo, element.amount)}}
          </mat-cell>
        </ng-container>

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

      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    </mat-card-content>
      <mat-card-actions>
      </mat-card-actions>
    </mat-card>
      </mat-card-content>
    </mat-card>

please help me. Thank you.

Answer 1

Try this: Below

<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>

add a line with the footer row, like this:

<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>

Source: Angular Material's docs