Angular 9 CRUD | Part 8 |Delete an Existing Product

0
1429

In this article, I am going to show you how to delete a product in Angular 9 CRUD Application. We are going to delete the product based on the product ID. Our angular application pass the product id in the URL parameter. The web API fetch the product id from the URL and delete the particular product from the database.

Angular 9 crud application creation

Create a method for delete product in your view component

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

In this method, i am passing the product id in the constructor. I used the crud service method deleteProduct here. i just pass the product id to the method. It performs the delete operation and return the result to user.

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(data => {
this.products = data;
}, err => {}, () => {
setTimeout(() => {
this.dataTable = $(this.Table.nativeElement);
this.tableElement = this.dataTable.DataTable(this.dtOptions);
}, 1000);
});
}

and your component file like this.

import {Component, OnInit, ViewChild, Renderer2, AfterViewInit} from '@angular/core';
import {CrudService} from '../../services/crud.service';
import {Router} from '@angular/router';
import {Products} from '../../models/products';
declare var $;

@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit, AfterViewInit {
public products: Products [];
@ViewChild('productsTable', {static: false}) Table;
public dataTable: any;
public dtOptions;
public tableElement: any;
constructor(
private crudService: CrudService,
private router: Router,
private renderer: Renderer2
) { }

ngOnInit(): void {
this.loadProducts();
}

loadProducts() {
if ($.fn.DataTable.isDataTable(this.Table.nativeElement) ) {
$(this.Table.nativeElement).dataTable().fnDestroy();
}
this.crudService.getProducts().subscribe(data => {
this.products = data;
}, err => {}, () => {
setTimeout(() => {
this.dataTable = $(this.Table.nativeElement);
this.tableElement = this.dataTable.DataTable(this.dtOptions);
}, 1000);
});
}

ngAfterViewInit(): void {
}

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-fluid">
  <div class="row">
    <div class="col-12">
      <h1 class="text-center"> Angular 9 CRUD</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button class="btn btn-success" (click)="getNavigation('create', '')">Create New Product</button>
    </div>
  </div>
  <div class="row">
    <div class="col-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>
  1. Angular 9 CRUD | Part 1 | Project Creation and Theme Integration
  2. Angular 9 CRUD | Part 2 | Web API Preparation
  3. Part 3 | Creating Web Services using HttpClient
  4. Part 4 | Display the Products
  5. Part 5 | View Single Product Details
  6. Part 6 | Create New Product
  7. Part 7 | Update an Existing Product
  8. Part 8 |Delete an Existing Product

For more tutorials visit my YouTube channel