CODEWITHSUNDEEP
javascriptangularrxjsmean-stack
iseri
iseri

Reputation: 73

How to delete a row in a table in Angular4 . The delete button is in each row

Component

<tr *ngFor="let item of items; let i = index">
    <th>{{ i +  1 }}</th>
    <th>{{ item.id }}</th>
    <td>{{ item.title }}</td>
    <th><button (click)="deleteItem()">Edit</button></th>
  </tr>

Item.service

deleteItem(){
let header =  new HttpHeaders();
return this._http.delete(this.api);

I assume i should append the delete button with id for the item. But I dont know how to implement that.

Im using the new HttpClient

Upvotes: 0

Views: 554

Answers (3)

gazorpazorp
gazorpazorp

Reputation: 527

You can pass the item as a parameter to deleteItem as

<tr *ngFor="let item of items; let i = index">
  <th>{{ i +  1 }}</th>
  <th>{{ item.id }}</th>
  <td>{{ item.title }}</td>
  <th><button (click)="deleteItem(item)">Edit</button></th>
</tr>

Now, depending on your actual API endpoints, you can do something like

deleteItem(item: any){
  return this._http.delete(this.api + '/items/' + item.id);
}

Upvotes: 1

Devang Naghera
Devang Naghera

Reputation: 706

Just pass the item id in delete function like

<th><button (click)="deleteItem(item.id)">Edit</button></th>

And get that id in your delete function as a parameter and pass to the api

deleteItem(itemId){
    let header =  new HttpHeaders();
    return this._http.delete(this.api);
}

Hope it helps

Upvotes: 0

haku
haku

Reputation: 4505

You should be able to just add a parameter to the deleteItem() method of yours.

<tr *ngFor="let item of items; let i = index">
    <th>{{ i +  1 }}</th>
    <th>{{ item.id }}</th>
    <td>{{ item.title }}</td>
    <th><button (click)="deleteItem(item.id)">Edit</button></th>
  </tr>

deleteItem(number id){
let header =  new HttpHeaders();
return this._http.delete(this.api);

Upvotes: 0

Related Questions