In this article, I am going to show you how to delete a product.

Create a method for delete product in your view component

deleteProduct(pID) {
this.crudService.deleteProduct(pID).subscribe(data => {
this.loadProducts();
})
}

You need to modify your loadProducts method like this

loadProducts(){
if ($.fn.DataTable.isDataTable(this.Table.nativeElement) ) {
$(this.Table.nativeElement).dataTable().fnDestroy();
}
this.crudService.getProducts().subscribe(
productData => {
this.products = productData;

this.dataTable = $(this.Table.nativeElement);
setTimeout(()=>{
this.dataTable.DataTable();
}, 2000);

},(err)=>{
}, ()=>{
}
);
}

and your component file like this

import {Component, OnInit, ViewChild} from '@angular/core';
import {CrudService} from "../../services/crud.service";
import {Router} from "@angular/router";
declare var $;
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
public products: any = [];
@ViewChild('productsTable') Table;
public dataTable: any;
constructor(
private crudService: CrudService,
private router: Router
) { }

ngOnInit() {
this.loadProducts();
}

loadProducts(){
if ($.fn.DataTable.isDataTable(this.Table.nativeElement) ) {
$(this.Table.nativeElement).dataTable().fnDestroy();
}
this.crudService.getProducts().subscribe(
productData => {
this.products = productData;

this.dataTable = $(this.Table.nativeElement);
setTimeout(()=>{
this.dataTable.DataTable();
}, 2000);

},(err)=>{
}, ()=>{
}
);
}

getNavigation(link, id){
if(id === ''){
this.router.navigate([link]);
} else {
this.router.navigate([link + '/' + id]);
}
}

deleteProduct(pID) {
this.crudService.deleteProduct(pID).subscribe(data => {
this.loadProducts();
})
}

}

Your template file like this

<div class="container">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12 col-xs-12">
<button class="btn btn-success" (click)="getNavigation('create', '')">Create New Product</button>
</div>
</div>
<br>
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12 col-xs-12">
<table #productsTable class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products; let i =index;">
<td>{{i + 1}}</td>
<td>{{product.p_name}}</td>
<td>{{product.p_description}}</td>
<td>$ {{product.p_price}}</td>
<td>
<button type="button" class="btn btn-success" (click)="getNavigation('view', product.p_id)">View</button>
<button type="button" class="btn btn-warning" (click)="getNavigation('update', product.p_id)">Edit</button>
<button type="button" class="btn btn-danger" (click)="deleteProduct(product.p_id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>