Как можно добавить кнопки удаления в каждую строку таблицы?

Question

[Павел Петров]

Извините, я только начал изучать ангуляр. Решил вывести массив программистов в таблице, используя Angular Material. Как можно добавить кнопку удаления программиста из таблицы в каждую строку таблицы, используя Angular Material?

Мой table.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {Programmer} from "../../interfaces/Programmer";
 const ELEMENT_DATA: Array<Programmer> = [
{ id: 1, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true},
    { id: 12, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true},
    { id: 13, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true},
    { id: 11, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true}
 ];

@Component({
  selector: 'app-programmer-table',
  templateUrl: './programmer-table.component.html',
  styleUrls: ['./programmer-table.component.scss']
})

export class ProgrammerTableComponent {
  displayedColumns: Array<String> = ['id', 'firstName', 'lastName', 'middleName', 'position', 'dateOfBirth', 'active'];
  @Input() programmers!: Array<Programmer>;

}

table.component.html

<table mat-table [dataSource]="programmers" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef> firstName </th>
    <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef> lastName </th>
    <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
  </ng-container>

  <ng-container matColumnDef="middleName">
    <th mat-header-cell *matHeaderCellDef> middleName </th>
    <td mat-cell *matCellDef="let element"> {{element.middleName}} </td>
  </ng-container>

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> position </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="dateOfBirth">
    <th mat-header-cell *matHeaderCellDef> dateOfBirth </th>
    <td mat-cell *matCellDef="let element"> {{element.dateOfBirth}} </td>
  </ng-container>

  <ng-container matColumnDef="active">
    <th mat-header-cell *matHeaderCellDef> active </th>
    <td mat-cell *matCellDef="let element"> {{element.active}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="display(row)"></tr>
</table>