I have a service which is getting a list of data and displating it on the appponent.html

This is the code for displaying the data:

<ul>
    <li *ngFor="let data of retrieveData"> 
        {{ data.id }} - {{data.title}} <span><button (click)="delete(data.id)">Delete Record</button></span>
    </li>
</ul>

As you can see I've added a delete button for each row of data which then calls a method to delete the data from the server.

This works but at the same time I need this data removed from the view without having to reload the page

On the appponent.ts I have this method which then called the service method:

delete() {
    this.apiService.delete(1).subscribe(result => {
      console.log(result);
    }, error => console.log('There was an error: ', error));
}

How can I get the ponent data updated without reloading the page?

I have a service which is getting a list of data and displating it on the app.ponent.html

This is the code for displaying the data:

<ul>
    <li *ngFor="let data of retrieveData"> 
        {{ data.id }} - {{data.title}} <span><button (click)="delete(data.id)">Delete Record</button></span>
    </li>
</ul>

As you can see I've added a delete button for each row of data which then calls a method to delete the data from the server.

This works but at the same time I need this data removed from the view without having to reload the page

On the app.ponent.ts I have this method which then called the service method:

delete() {
    this.apiService.delete(1).subscribe(result => {
      console.log(result);
    }, error => console.log('There was an error: ', error));
}

How can I get the ponent data updated without reloading the page?

• javascript
• angular
• typescript
• angular6

Share Improve this question Follow asked May 7, 2018 at 19:14 user9273032user9273032 1

• You have essentially two choices: the first is covered by Ashish Tanajan Another option is reloading the data from the API (not reloading the view). The choice you make would be based on how often the server side data changes and how important it would be for the user to have the most up-to-date copy of the data. – Robert Kaucher Commented May 7, 2018 at 19:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Update the displayed collection to remove the deleted element.

delete(id) {
    this.apiService.delete(id).subscribe(result => {
      console.log(result);
      this.retrieveData = this.retrieveData.filter((elem) => {
          return elem.id !== id;
      });
    }, error => console.log('There was an error: ', error));
}

First find the index of the Object you are deleting, upon success, remove it from the already loaded list..

delete(passedId) {
    this.apiService.delete(passedId).subscribe(result => {
      console.log(result);
      let indexOfId = this.retrieveData.findIndex((eachEleme) => {
          return eachElem.id = passedId;
      }); //gives the index of the first matching id
          // asuming you have unique ids..
      this.retrieveData.splice(indexOfId,1);  // removes the element
                                              // from the preloaded list
      this.retrieveData.a.findIndex()
    }, error => console.log('There was an error: ', error));
}

Just pass index from ngFor to your delete() function like this:

<ul>
    <li *ngFor="let data of retrieveData; let idx = index"> 
        {{ data.id }} - {{data.title}} <span><button (click)="delete(data.id, idx)">Delete Record</button></span>
    </li>
</ul>

And then in your delete function

delete(id, idx) {
  this.apiService.delete(id).subscribe(result => {
    console.log(result);
  }, error => console.log('There was an error: ', error));
  this.retrieveData.splice(idx, 1);
}