How correctly send delete request in angular?

I have some troubles with sending delete request to my backend application.
I have a table of products and i want add delete button for each element in table.

Here is my delete method in service:

 makeDelete(id: string){
 this.httpClient.delete(this.url + '/' + id);

My component ts:

export class DrinkComponent implements OnInit {
index: any;
drink: any;

constructor(private drinkService: DrinkService) { }

ngOnInit(): void {
  .subscribe(resp => { this.index = resp });

deleteItem(drink: any){
 this.drink = drink;


    <div class="table">
        <div class="margin">
            <div class="header">
                <span class="dId">
                <span class="pId">
                <span class="pName">
                <span class="pType">
                <span class="pQuantity">

            <div class="tableHeader">
                <div class="tableData" *ngFor="let drink of index">
                    <span class="drinkId">{{}}</span>
                    <span class="productId">{{}}</span>
                    <span class="drinkName">{{}}</span>
                    <span class="drinkType">{{drink.type}}</span>
                    <span class="productQuantity">{{drink.product.quantity}}</span>
                    <div >
                        <button class="deleteButton" type="submit" (ngSubmit)="deleteItem(drink)">DELETE</button>


Thanks in advance

>Solution :

You’re using the ngSubmit event when you should be using click. ngSubmit is for forms and what to do when they are submitted.


<button class="deleteButton" type="submit" (click)="deleteItem(drink)">DELETE</button>

Leave a Reply