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

Question

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?

Vivek Doshi · Answer 1 · 2017-10-24T05:04:19.883

3

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));
}

edited Oct 24 '17 at 05:04

answered Oct 24 '17 at 04:16

Vivek Doshi

56,649
12
110
122

1

This is brilliant but I prefer not to add properties to my interface which are not real properties of the person type. – Iman Oct 24 '17 at 04:45
@Iman, no problem, but still you get one more way to do it, I have solved many issue by using this way. Its just matter of way of solving problems. – Vivek Doshi Oct 24 '17 at 04:47
@Iman , you should use the second method I have just posted now then use the accepted answer, it will loop through the data twice once on delete , second on showing data again, by my second method it will just loop once on delete. – Vivek Doshi Oct 24 '17 at 04:57

score 2 · Answer 2 · edited Oct 24 '17 at 04:50

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);
};

score 2 · Accepted Answer · edited Oct 24 '17 at 04:48

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>

This vill not work as you throw away the result of filter() – Esben Skov Pedersen Oct 24 '17 at 05:21 — Esben Skov Pedersen, Oct 24 '17 at 05:21

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

3 Answers3

Linked