How correctly send delete request in angular?

August 7, 2022

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 {
 this.drinkService.getIndex()
  .subscribe(resp => { this.index = resp });
}

deleteItem(drink: any){
 this.drink = drink;
 console.log(this.drink.id);
 this.drinkService.makeDelete(drink.id);
}

And HTML:

<body>
    <div class="table">
        <div class="margin">
            <div class="header">
                <span class="dId">
                    <strong>DrinkID</strong>
                </span>
                <span class="pId">
                    <strong>ProductID</strong>
                </span>
                <span class="pName">
                    <strong>Name</strong>
                </span>
                <span class="pType">
                    <strong>Type</strong>
                </span>
                <span class="pQuantity">
                    <strong>Quantity</strong>
                </span>
            </div>

            <div class="tableHeader">
                <div class="tableData" *ngFor="let drink of index">
                    <span class="drinkId">{{drink.id}}</span>
                    <span class="productId">{{drink.product.id}}</span>
                    <span class="drinkName">{{drink.name}}</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>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

Thanks in advance