I am deleting the object from my database using delete button made in angular 13, but this does not delete it instantly from frontend

Question

i need to delete the object real-time from frontend as well as backend my, The object gets deleted from the backend instantly but it do not reflects in the frontend till the page is refreshed

//delete component

deleteStory(id : string){
  console.log(id)
  this.storyapiService.deleteStory(id).subscribe();
  

  }

service.ts

deleteStory(id: string): Observable<number>{

     return this.http.delete<number>(this.API_URL +id);

  }

//html

<button class="btn btn-primary" (click)="deleteStory(story.id)" style="margin-left:5px">Delete </button>

Where do you hold all the stories? Do you have an array? You only need to remove the story that you delete on your backend from your array to stop displaying it in the UI. — Octavian Mărculescu, Dec 02 '22 at 11:57

score 1 · Accepted Answer · answered Dec 02 '22 at 12:13

1

Try to get data again once you delete the element to refresh the current view.

Hope it works!

answered Dec 02 '22 at 12:13

José Ignacio Duque

58
6

score 0 · Answer 2 · answered Dec 02 '22 at 13:42

After you send the delete request to the backend, the frontend does not react to the result of the request. Therefore, it does nothing.

You have to either remove the element from your list in deleteStory() after the call to the backend was successful, or re-fetch all stories from the backend again.

score 0 · Answer 3 · answered Dec 07 '22 at 09:07

Does you backend send a success or fail? If so use your subscribe results,

deleteStory(id : string){
  this.storyapiService.deleteStory(id).subscribe(
          result => this.refreshPageOrUpdateUIFunction(result), // <-- function to reflect update
          error => this.showError(error), // <-- show your errors
        );}

I am deleting the object from my database using delete button made in angular 13, but this does not delete it instantly from frontend

3 Answers3