games.component.html

<h2 class="fw-bold ms-4 mt-1 fs-2">Games</h2>
<table class="games">
  <tr *ngFor="let game of games">
    <span class="badge">{{game.id}}</span>
    <th>{{game.gameDateTime}}</th>
    <th>{{game.homeTeam.name}}</th>
    <th>{{game.awayTeam.name}}</th>
    <th>{{game.homeTeamScore}}:{{game.awayTeamScore}}</th>
    <th>
      <app-delete-game-button (onDelete)="triggerRefreshEvent()" [id]=game.id></app-delete-game-button>
    </th>
  </tr>
</table>
<!-- 
<h2 class="fw-bold ms-2 mt-1 fs-2">Games</h2>
<table #table [dataSource]="games" mat-table class="ms-4">

  <ng-container matColumnDef="name">
    <th *matHeaderCellDef mat-header-cell> Game Date</th>
    <td *matCellDef="let game" mat-cell> {{game.gameDateTime}} </td>
  </ng-container>
  <ng-container matColumnDef="homeTeam">
    <th *matHeaderCellDef mat-header-cell> Home Team</th>
    <td *matCellDef="let game" mat-cell> {{game.homeTeam.name}} </td>
  </ng-container>
  <ng-container matColumnDef="awayTeam">
    <th *matHeaderCellDef mat-header-cell> Away Team</th>
    <td *matCellDef="let game" mat-cell> {{game.awayTeam.name}} </td>
  </ng-container>
  <ng-container matColumnDef="score">
    <th *matHeaderCellDef mat-header-cell> Score</th>
    <td *matCellDef="let game" mat-cell> {{game.homeTeamScore}}:{{game.awayTeamScore}} </td>
  </ng-container>

  <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
</table>
-->