方法1: ボタンをセル内に配置する 最も基本的な方法は、mat-tableのセル内にボタンを配置することです。以下はその例です。
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button (click)="doSomething(element)">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>上記の例では、"actions"という列名でボタンを配置しています。ボタンがクリックされると、doSomething()メソッドが呼び出されます。
方法2: ボタンをヘッダーに配置する ボタンを表のヘッダーセルに配置することもできます。以下はその例です。
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
<button mat-icon-button (click)="doSomething()">
<mat-icon>add</mat-icon>
</button>
</th>
<td mat-cell *matCellDef="let element"> {{ element.actions }} </td>
</ng-container>上記の例では、"actions"という列名でボタンを表のヘッダーセルに配置し、各行のセルにはelement.actionsの値が表示されます。
方法3: ボタンをフッターに配置する ボタンを表のフッターセルに配置することもできます。以下はその例です。
<ng-container matColumnDef="actions">
<th mat-footer-cell *matFooterCellDef colspan="3">
<button mat-icon-button (click)="doSomething()">
<mat-icon>delete</mat-icon>
</button>
</th>
</ng-container>上記の例では、"actions"という列名でボタンを表のフッターセルに配置しています。colspan属性は、フッターセルを複数の列に広げるために使用されています。
これらはいくつかの一般的な方法ですが、mat-table内にボタンを配置するための他の方法もあります。必要に応じて、これらの例をカスタマイズして利用することができます。