title: Delete method with kendo-grid using angular and sweetalert2
body: <p>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?</p>
  
  <p>i use an api to execute the method running in local.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;kendo-grid
      [kendoGridBinding]="prod"
      [filterable]="true"
      [groupable]="true"
      [sortable]="true"
      [pageSize]="10"
      [pageable]="true"
      [height]="510"&gt;
      &lt;kendo-grid-column field="productId" title="Product ID" [width]="70"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="productName" title="Product Name" [width]="120"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="productNumber" [width]="100"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="description" [width]="130"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column title="command" width="100"&gt;
              &lt;ng-template kendoGridCellTemplate let-dataItem&gt;
                  &lt;button kendoGridEditCommand [primary]="true"&gt;Edit&lt;/button&gt;
                  &lt;button
                    [swal]="{ title: 'Delete Product', 
                              text: 'this will delete permanently',
                              cancelButtonColor:'#d33',
                              showCancelButton:true,
                              cancelButtonText:'Cancel',
                              confirmButtonColor:'#000000',
                              confirmButtonText:'Delete'}"
                    (confirm)="deleteProduct(dataItem.productId)"&gt;
                    Delete
                  &lt;/button&gt;
              &lt;/ng-template&gt;
      &lt;/kendo-grid-column&gt;
  &lt;/kendo-grid&gt;
  
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>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) =&gt; this.prod=data);
    }
  
    public deleteProduct(productId: number): void {
      this.http.delete("http://localhost:51024/api/Product/"+productId);
    }
  }
  </code></pre>