How can delete buttons be added to each row of a table?

Question

JavaScript

Sorry, I just started learning Angular. I decided to display an array of programmers in a table using Angular Material. How can I add a button to remove the programmer from the table to each row of the table using Angular Material?

My 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>