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>
              <app-delete-game-button (onDelete)="triggerRefreshEvent()" [id]=game.id></app-delete-game-button>
            </td>
          </tr>
    </tbody>
</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>
-->
<!--
<table #table [dataSource]="games" mat-table class="ms-4">
    <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>
    <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
    <tr (click)="highlight(row)" *matRowDef="let row; columns: columnsToDisplay"
        [ngClass]="{'highlight': selectedRowIndex == row.id && highlightSelected}"
        mat-row></tr>
</table>-->