<!-- app.comment.html -->
<div>
  <mat-form-field *ngFor="let filter of filterSelectObj" style="margin-left: 15px;">
    <mat-label>Filter {{filter.name}}</mat-label>
    <select matNativeControl name="{{filter.columnProp}}" [(ngModel)]="filter.modelValue"
      (change)="filterChange(filter,$event)">
      <option value="">-- Select {{filter.name}} --</option>
      <option [value]="item" *ngFor="let item of filter.options">{{item}}</option>
    </select>
  </mat-form-field>
  &nbsp;
  <button mat-flat-button color="warn" (click)="resetFilters()">Reset</button>
</div>

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> category </th>
    <td mat-cell *matCellDef="let element"> {{element.category}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> price</th>
    <td mat-cell *matCellDef="let element"> {{element.price}} </td>
  </ng-container>

  <ng-container matColumnDef="rating">
    <th mat-header-cell *matHeaderCellDef> rating </th>
    <td mat-cell *matCellDef="let element"> {{element.rating}} </td>
  </ng-container>

  <ng-container matColumnDef="brand">
    <th mat-header-cell *matHeaderCellDef> brand </th>
    <td mat-cell *matCellDef="let element"> {{element.brand}} </td>
  </ng-container>



  <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>