CODEWITHSUNDEEP
javascriptphphtmlangular
jay shah
jay shah

Reputation: 49

How to Delete by clicking on it..?

I have one table content in which I have created view of it's list and performing the edit and deleting task on it.

I am trying it by calling in services the splice method and in the component it's service by id.

table.component.ts:

 delete(com) {
    this.service.DeleteUser(com);
    console.log(com);
}

table.component.html:

<a class="btn btn-outline-danger  btn-sm" (click)="delete(com.id)">Delete</a>

service:

 DeleteUser(index: number) {
    this.company.splice(index, 1);
    this.company_change.next(this.company.slice());
  }

I want to get delete button on working condition,company:Company[] list is been created by type model.

Upvotes: 1

Views: 85

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22213

As you are passing company id (not index) here (click)="delete(com.id)", you have to filter the company list to find the index (i) of the company whose id matches the id you have passed and then splice the company list based on the index.

Try like this:

 DeleteUser(id: number) {

    for(let i=0;i<this.company.length;i++) {
      if(this.company[i].id == id) {
        this.company.splice(i, 1)
      }
    }
  }

Upvotes: 1

Seba Cherian
Seba Cherian

Reputation: 1793

Try this:

replace the com.id with i in the click function delete

<tr class="table-active" *ngFor="let com of company;  let i = index">
        <td>{{com.co_name}}</td>
        <td>{{com.co_profile}}</td>
        <td>{{com.co_address}}</td>
        <td>{{com.co_email}}</td>
        <td>
          <a class="btn btn-outline-secondary btn-sm" [routerLink]="['/table',com.id]">
            Edit
          </a>
          <a class="btn btn-outline-danger  btn-sm" (click)="delete(i)">Delete</a>
        </td>
      </tr>

Upvotes: 2

Related Questions