CODEWITHSUNDEEP
javascriptangular
Iman
Iman

Reputation: 829

Angular , How to hide a table row on click of a button

I have a table in which each row has a delete button. on click of the button the data gets deleted. However to verify that record is deleted, I have to refresh the page. I want to hide the current row on click of the delete button. Here is my code.

<table>
    <tr>
        <th>Delete</th>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr *ngFor="let person of people" *ngIf="!hideRow">
        <td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
        <td>person.Id</td>
        <td>person.Name</td>
    </tr>
</table>

and in my component.ts On delete I change the value of hideRow

delete(id) {  
  this.hideTr = true;
  this.personService.delete(id).subscribe(p=> console.log(p));
}

hideRow is a boolean variable with default value of false. The problem is that when I click on delete, all the rows become hidden(of course). How can I refer just to the current row?

Upvotes: 1

Views: 8947

Answers (3)

Vivek Doshi
Vivek Doshi

Reputation: 58593

Simple yet more effective :

Template Side :

<tr *ngFor="let person of people" *ngIf="!person?.hideRow">
    <td><button (click)="delete(person)" title="Delete">Delete</button></td>
    <td>person.Id</td>
    <td>person.Name</td>
</tr>

Component Side :

delete(person) {  
  person.hideRow = true;
  this.personService.delete(person.id).subscribe(p=> console.log(p));
}

Without changing user's (property) interface

Template Side :

<tr *ngFor="let person of people;let i = index;">
    <td><button (click)="delete(i , person.id)" title="Delete">Delete</button></td>
    <td>person.Id</td>
    <td>person.Name</td>
</tr>

Component Side :

delete(index , id) {  
    this.people.splice(index, 1);
    this.personService.delete(id).subscribe(p=> console.log(p));
}

Upvotes: 3

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

When you want to delete the row then you should delete it in actual instead of hide row. No need of *ngIf="!hideRow". You no need to refresh the page, this is beauty of AngularJS. Below is code to delete particular row. Pass $index of the row:

HTML code:

<table>
    <tr>
        <th>Delete</th>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr *ngFor="let person of people">
        <td><button (click)="delete($index)" title="Delete">Delete</button></td>
        <td>person.Id</td>
        <td>person.Name</td>
    </tr>
</table>

JavaScript Code:

// delete row
$scope.delete = function(index) {
    $scope.people.splice(index, 1);
};

Upvotes: 2

brijmcq
brijmcq

Reputation: 3418

Based from the code you provided, I would remove this part *ngIf="!hideRow" and add this to your component

delete(id) {  
    this.personService.delete(id).subscribe(p=> {
        console.log(p);
        this.people.filter( person => person.id !== id)
        // or you can use splice by using the index
    });
}

Now your html is simpler and no need to use *ngIf

<table>
    <tr>
        <th>Delete</th>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr *ngFor="let person of people">
        <td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
        <td>person.Id</td>
        <td>person.Name</td>
    </tr>
</table>

Upvotes: 2

Related Questions