Home Angular Angular 7 CRUD Angular 7 CRUD — Part 8— Delete an Existing Product

Angular 7 CRUD — Part 8— Delete an Existing Product

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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

The Binary Search Algorithm in JavaScript

In this post, I'll compare linear search and binary search algorithms. You'll see pseudocode for each algorithm, along with examples and a...

JavaScript Callbacks, Promises, and Async Functions|Part 2

Introduction In part one of this tutorial, we learned the principles behind asynchronous programming and using callbacks. To review,...

JavaScript Callbacks, Promises, and Async Functions| Part 1

Introduction There is a lot of talk about asynchronous programming, but what exactly is the big deal? The big...

JavaScript Best Practices for Beginners

1. Use === Instead of == JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to...

Recent Comments

Sathish Kumar Ramalingam on Angular 2 Admin LTE Theme Integration