Как рассчитать сумму столбцов таблицы и показать в нижнем колонтитуле с помощью Angular?

В документация углового материала есть инструкции, а также образец в Примеры.

Что вам нужно сделать, так это определить ячейку нижнего колонтитула аналогично тому, как вы это делаете для заголовков в каждом столбце. В привязках столбца для столбца нижнего колонтитула вы непосредственно определяете, как вы вычисляете сумму. Нет необходимости добавлять еще одну строку с итоговыми данными. После этого вы просто добавляете определение строки нижнего колонтитула, и все работает.

Вот измененный шаблон из вашего образца:

<mat-table [dataSource] = "dataSource">

  <!-- Columns -->
  <ng-container matColumnDef = "player">
    <mat-header-cell *matHeaderCellDef> Player </mat-header-cell>
    <mat-cell *matCellDef = "let player"> {{ player.name }}</mat-cell>
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <ng-container matColumnDef = "team">
    <mat-header-cell *matHeaderCellDef> Team </mat-header-cell>
    <mat-cell *matCellDef = "let player"> {{ player.team }}</mat-cell>
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <ng-container matColumnDef = "goals">
    <mat-header-cell class = "right-align" *matHeaderCellDef> Goals </mat-header-cell>
    <mat-cell class = "right-align" *matCellDef = "let player"> {{ player.goals }}</mat-cell>
    <mat-footer-cell *matFooterCellDef> Total: {{ calculateTotal() }}</mat-footer-cell>
  </ng-container>

  <!-- Rows -->
  <mat-header-row class = "sticky-header" *matHeaderRowDef = "['player', 'team', 'goals']"></mat-header-row>
  <mat-row *matRowDef = "let row; columns: ['player', 'team', 'goals']"></mat-row>
  <mat-footer-row class = "sticky-footer" *matFooterRowDef = "['player', 'team', 'goals']"></mat-footer-row>

</mat-table>

А также измененный код компонента, так что вы видите, что вам не нужно изменять данные.

export class AppComponent {

  dataSource: PlayerDataSource;

  isLastRow = (data, index) => index === this.players.length;

  players = STATS.slice();

  constructor() {
    this.dataSource = new PlayerDataSource();
    this.dataSource.use(this.players.slice());
  }

  public calculateTotal() {
    return this.players.reduce((accum, curr) => accum + curr.goals, 0);
  }

}


export class PlayerDataSource extends DataSource<PlayerOrTotal> {

  dataWithTotal = new BehaviorSubject<PlayerOrTotal[]>([]);

  use(players: Player[]) {
    this.dataWithTotal.next([ ...players]);
  }

  connect(): Observable<PlayerOrTotal[]> {
    return this.dataWithTotal.asObservable();
  }

  disconnect() {}
}

Я также создал форк вашего StackBlitz, где вы можете увидеть, как он работает.