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 · Accepted Answer · 2017-10-24 05:04:19Z

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, 2017 at 5:04

answered Oct 24, 2017 at 4:16

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

3 Comments

Iman Over a year ago

This is brilliant but I prefer not to add properties to my interface which are not real properties of the person type.

Vivek Doshi Over a year ago

@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 Over a year ago

@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 · Accepted Answer · 2017-10-24 04:48:51Z

2

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>

edited Oct 24, 2017 at 4:48

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

answered Oct 24, 2017 at 4:15

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

1 Comment

Esben Skov Pedersen Over a year ago

This vill not work as you throw away the result of filter()

Vivek Doshi · Accepted Answer · 2017-10-24 04:50:13Z

2

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

edited Oct 24, 2017 at 4:50

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

answered Oct 24, 2017 at 4:08

Vikasdeep Singh

21.9k16 gold badges82 silver badges106 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related