<div class="mat-elevation-z4">
    <table mat-table [dataSource]="products">
      <!-- Id Column -->
      <ng-container matColumnDef="id">
        <th width="60px" mat-header-cell *matHeaderCellDef>Id</th>
        <td mat-cell *matCellDef="let row">{{row.id}}</td>
      </ng-container>
  
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let row">{{row.name}}</td>
      </ng-container>
  
      <!-- Price Column -->
      <ng-container matColumnDef="price">
        <th width="120px" mat-header-cell *matHeaderCellDef>Valor (R$)</th>
        <td mat-cell *matCellDef="let row">{{row.price | currency: 'BRL'}}</td>
      </ng-container>    

      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <th width="50px" class="actions" mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let row">
            <a routerLink="/products/update/{{row.id}}" class="edit">
                <i class="material-icons">
                    edit
                </i>                
            </a>
            <a routerLink="/products/delete/{{row.id}}" class="delete">
                <i class="material-icons">
                    delete
                </i>                
            </a>
        </td>
      </ng-container>          
  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  