controller

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../product.service';
import { Router } from '@angular/router';
import { ProductInterface } from '../../product-interface';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit {
  products: ProductInterface[] = [];
  filteredProducts: ProductInterface[];
  displayedTableColumns = ['title', 'category', 'price', 'actions'];

  constructor(private productService: ProductService, private router: Router) { }

  ngOnInit() {
    this.getProducts();
  }

  editProduct(id) {
    this.router.navigate([`/admin/products/${id}`]);
  }

  deleteProduct(id) {
    if (confirm('You are about to permanently remove this product. Continue?')) {
      this.productService.deleteAProduct(id).subscribe(() => this.ngOnInit());
    }
  }

  getProducts() {
    this.productService.getAllProducts().subscribe((products: ProductInterface[]) => {
      console.log(products);
      this.products = products;
      this.filteredProducts = this.products;
    });
  }

  filterProducts(query) {
    this.filteredProducts = query ?
      this.products.filter(product => product.title.toLowerCase().includes(query.toLowerCase())) :
      this.products;
  }

}