template

<a routerLink="/admin/products/new" class="btn btn-primary my-3">New product</a>

<div class="form-inline my-2 my-lg-0">
  <input #query (keyup)="filterProducts(query.value)" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</div>


<table class="table table-striped my-3">
  <thead>
  <tr>
    <th>Title</th> <th>Category</th> <th>Price</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let product of filteredProducts">
    <td>{{ product.title }}</td>
    <td>{{ product.category }}</td>
    <td>{{ product.price | currency: 'USD': 'symbol-narrow' }}</td>
    <td><a (click)="editProduct(product._id)" class="btn btn-link btn-info">Edit</a></td>
    <td><a (click)="deleteProduct(product._id)" class="btn btn-link btn-danger">Delete</a></td>
  </tr>
  </tbody>
</table>