はじめに

Angular formArray にデータが追加される度に Angular material の dataTable にデータを追加する方法をまとめます。サンプルアプリケーションのソースコードを Github で公開しています。

アプリケーションはこちら

fir-angular-showcase.web.app

Angular formArray にデータが追加される度に Angular material の dataTable にデータを追加する

formArray として追加され、重複した key を集計した後に dataTable に pushします。
Angular material datatable はどことなく扱いづらい印象がありますが、かなり簡単でした。

MatTableDataSource を import し FormGroup.valueChanges の度に productsList を更新するだけです。

import { MatTableDataSource } from '@angular/material';

  data = new MatTableDataSource(this.productsList);

  calculate(order?: Order) {
    this.data = new MatTableDataSource(this.productsList);
  }

また、material datatable は template 内で簡単な演算ができてしまうので、小計の計算をやってみました。
もちろん ts 側で calcSubTotal() のようなメソッドを作成して template から呼び出すこともできそうです。

<ng-container matColumnDef="Subtotal">
  <th mat-header-cell *matHeaderCellDef> Subtotal </th>
  <td mat-cell *matCellDef="let data">{{ data.product.price * data.productNumber || 0 | number}}</td>
  <td mat-footer-cell *matFooterCellDef>{{getTotal() || 0 | number}}</td>
</ng-container>

まとめ

Angular formArray にデータが追加される度に Angular material の dataTable にデータを追加する方法をまとめました。
サンプルアプリケーションのソースコードを Github で公開しています。

github.com