HTTP Handle Errors

Hey! I already saw some of the posts, but nothing here seems to solve my basic error (but yet idk how to do so).

Below is the code which doesn’t work for me. The issue is that even though post id number 345 doesn’t exist, the “next” part of the subscribe method still is called, and the error one isn’t. Does anyone know why? Any help would be appreciated, looks very easy to solve but I am stuck for few hours now. Thanks!

in post.service.ts

deletePost(id: number) {
    return this.http.delete(this.url + '/' + id);
  }

in posts.component.ts

deletePost(post: any) {
    this.service.deletePost(345) // post['id']
    .subscribe({
      next: respnse => {
        let index=this.posts.indexOf(post);
        this.posts.splice(index, 1);
        alert('This should not be displayed, since post id number 345 does not exist!');
      },
      error: (error: Response) => {
        if(error.status === 404) {
          alert('This post has already been deleted!');
        }
        else {
          alert('An unexpected error occurred!');
          console.log(error); 
        } 
      }
    });
}

Here is the result, when clicking on “Delete”

My html:

<input (keyup.enter)="createPost(title)" #title type="text" class="form-control">

<ul class="list-group">
    <li class="list-group-item"
    *ngFor="let post of posts">
    <button 
    (click)="updatePost(post)"
    class="btn btn-default btn-sm">Update</button>
    {{post.title}}    
    <button 
    (click)="deletePost(post)"
    class="btn btn-default btn-sm">Delete</button>
    </li>
</ul>

Problem partially solved, or at least I know why it appears:
HTTP request returns 200 (OK), so this means actually success. It can come from the API of the website used here (fake database) not catching such error, and thus returning success while it shouldn’t have been the case