Delete method with kendo-grid using angular and sweetalert2

Question

My problem is that it didn't do anything after i tried to bind the data need to execute the method. it only pops up the sweetalert but when i click both button, nothing happens. any solution/guide for this?

i use an api to execute the method running in local.

HTML

<kendo-grid
    [kendoGridBinding]="prod"
    [filterable]="true"
    [groupable]="true"
    [sortable]="true"
    [pageSize]="10"
    [pageable]="true"
    [height]="510">
    <kendo-grid-column field="productId" title="Product ID" [width]="70"></kendo-grid-column>
    <kendo-grid-column field="productName" title="Product Name" [width]="120"></kendo-grid-column>
    <kendo-grid-column field="productNumber" [width]="100"></kendo-grid-column>
    <kendo-grid-column field="description" [width]="130"></kendo-grid-column>
    <kendo-grid-column title="command" width="100">
            <ng-template kendoGridCellTemplate let-dataItem>
                <button kendoGridEditCommand [primary]="true">Edit</button>
                <button
                  [swal]="{ title: 'Delete Product', 
                            text: 'this will delete permanently',
                            cancelButtonColor:'#d33',
                            showCancelButton:true,
                            cancelButtonText:'Cancel',
                            confirmButtonColor:'#000000',
                            confirmButtonText:'Delete'}"
                  (confirm)="deleteProduct(dataItem.productId)">
                  Delete
                </button>
            </ng-template>
    </kendo-grid-column>
</kendo-grid>

component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
@Injectable()
export class ProductListComponent implements OnInit {

  constructor(private http:HttpClient) {}

  prod : any;

  ngOnInit() {
    this.listProduct();
  }

  getProduct(){
    return this.http.get("http://localhost:51024/api/Product/GetAllProduct");
  }

  listProduct() {
    this.getProduct().subscribe((data) => this.prod=data);
  }

  public deleteProduct(productId: number): void {
    this.http.delete("http://localhost:51024/api/Product/"+productId);
  }
}

Answer 1

I think you need to subscribe to the delete. Otherwise it is not executed.

public deleteProduct(productId: number): void {
   this.http.delete("http://localhost:51024/api/Product/"+productId)
   .subscribe(response => ...);
}