I am facing a problem regarding the deletion of a contact. I would like after I click on delete, to automatically delete the contact, not after refreshing. This is my code:

service :

deleteContact(id:string): Observable<Contact> {
    return this.http.delete<Contact>(this.baseApiUrl   '/contacts/'   id);
  }

component.ts:

   deleteContact(id:string) {
      this.contactService.deleteContact(id)
      .subscribe({
        next: (response) => {
          this.router.navigate(['contacts']);
        }
      })
  }

view:

 <button type="button" (click)="deleteContact(contact.id)" data-bs-dismiss="modal">Yes</button>

Thank you very much in advance.

CodePudding user response：

It seems that you make a request to delete the contact on server side. so pay attention that, the client side is not aware of it. you can do one of this options:

1. when making an HTTP request to delete the contact, make it return the updated list of contacts so that you can update your local list.

2. in case you'r not controlling the server side, you can also make another http request to get the new list right after the deletion. something like

   return this.http.delete<Contact>(this.baseApiUrl '/contacts/' id).pipe(switchMap(() => this.http.get<Contact>(this.baseApiUrl '/contacts/'));

hope it helps :)