How correctly send delete request in angular?

Question

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

Donald Duck · Accepted Answer · 2022-08-06 22:19:59Z

1

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

Try

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

answered Aug 6, 2022 at 22:19

Donald Duck

6233 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How correctly send delete request in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related