games.component.html

<h2 class="fw-bold ms-4 mt-1 fs-2">Games</h2>
<table class="table">
    <thead class="header bs-solid">
        <tr class="pb-4">
            <th>#</th>
            <th scope="col">Date and Time</th>
            <th scope="col">Home Team</th>
            <th scope="col">Away Team</th>
            <th scope="col">Score</th>
          </tr>
    </thead>
    <tbody>
        <tr *ngFor="let game of games let i = index" [attr.data-index]="i">
            <td>{{i + 1}}</td>
            <td>{{game.gameDateTime}}</td>
            <td>{{game.homeTeam.name}}</td>
            <td>{{game.awayTeam.name}}</td>
            <td>{{game.homeTeamScore}}:{{game.awayTeamScore}}</td>
            <td>
                <button (click)="handleEditClick(game)" class="btn btn-dark">
                    Edit
                </button>
            </td>
            <td>
              <app-delete-game-button (onDelete)="triggerRefreshEvent()" [id]=game.id></app-delete-game-button>
            </td>
        </tr>
    </tbody>
</table>