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>

Answer 1

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

Hope it works!

Answer 2

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.

Answer 3

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