Deleting Documents from Database in MEAN Stack

In our previous section, we transformed the response data, but we didn’t proved it. This section we will prove that the response data is really transformed, and we will learn how to delete a document in MEAN Stack. We will make the delete button workable and present it in each expansion panel.

We will use the following steps to add a new route for deleting a document:

1) We will go back to our app.js file, and we will add a new route for the delete http verb and with app.delete(). We put the request string in this function, which reaches API posts as a first argument here.

Previously, we used “/api/posts” but now we actually need to encode a new piece of information into the url. For delete requests, we send the ID or some other identifier of the thing we want to delete as part of the url. We don’t send a request body here.

We will add a dynamic path segment by adding a colon in the following way:

2) The express will extract the id. We will pass the second function to this, and it will be triggered for all incoming requests. In the body section of this function, we will simply show the id in the following way:

  app.delete(“/api/posts/:id”, (req, res, next)=>{    console.log(req.params.id);  });  

In the above code, req.params is a property managed by the nodejs or by express, which gives us access to all encoded parameters.

2) We will send back status code 200 and json response where we send back a message in the following way:

4) Now, we connect that route with the angular. We will go back to our post-list.component.ts file, where we have created the DELETE button. We will add a click listener to it and call the onDelete() method and pass the id to it in the following way:

  <button mat-button color= “warn”(click) = “onDelete(post.id)” > DELETE </button>  

5) We will go back to our post-list.component.ts file to create the onDelete() method. We will do this in the following way:

6) We need to call something in our service, which sends that delete request. So, we will go back to our service.ts file, and in this, we will create the deletePost(). In this function, we will use the angular http client to send a delete request. We will create this function in the following way:

  deletePost(postId: string){      this.http.delete(“http://localhost:3000/api/posts/”+postId)    }  

7) Now, we need to subscribe for the request to be sent and here we will simply console the delete message in the following way:

  deletePost(postId:string){      this.http.delete(“http://localhost:3000/api/posts/”+postId)      .subscribe(()=>{          console.log(“Deleted”);      });    }  

8) ow, we will use this deletePost() method in the post-list.component.ts So, we will go back to our component and in the onDelete() method, we will use it in the following way:

Now, we didn’t updated the array on the frontend. So, after clicking on the DELETE button, we will still see the post on the frontend, but it will send the request and will see the deleted message as a response.

9) We will now use the mongoose model and the deleteOne() method for deleting an item from the backend. We will go back to our aap.js file to reach the delete route. We will use the model and the deleteOne() method in the following way:

10) In this function, we will pass a javascript object to narrow down what should be deleted. In this object, we pass the _id and then we attach a then block to see if that succeeded. In the body of this function, we will get the result of that operation. We will console this result and send the response in the following way:

  app.delete(“/api/posts/:id”, (req, res, next)=>{    postmodel.deleteOne({_id:req.params.id}).then(result=>{      console.log(result);      res.status(200).json({        message:”Post deleted!”      });    });  });  

Now, we save the code and go back to our angular app. We will click on the delete button, and if again reload our angular app, we will not see the post here because it will be deleted from the database.

Now, we are able to delete elements from our mongodb database, but one thing is missing, i.e., our frontend Ui is not live updating right now.

11) For live updating, we will send a new postsUpdated notice to the rest of our app. So, we will go back to our posts.service.ts file and in the deletePost() method, we will replace console statement with the postUpdated statement in the following way:

  deletePost(postId:string){      this.http.delete(“http://localhost:3000/api/posts/”+postId)      .subscribe(()=>{          const updatedPosts = this.posts.filter();      });    }  

12) The filter() function allows us to only return a subset of that posts array. We will pass the function as argument to the filter function. This function will be executed for every post in the array. If it returns true, the post element will be kept but if it returns false, the element will not be part of the new filtered post array which we stored in updated posts. So, this function will be codded in the following way:

  .subscribe(()=>{          const updatedPosts = this.posts.filter(post=>post.id!==postId);          this.posts=updatedPosts;          this.postUpdated.next([…this.posts]);  });  

Now, our frontend UI will be updated when we delete a post from here.

Download Complete Project( Deleting documents from database.zip )

In the next section, we will learn how to add a post with an id.

Next TopicAdding a post with an ID

Deleting documents from database in MEAN Stack

Deleting Documents from Database in MEAN Stack

Architecture of Mean Stack

Azure API Apps and API Management

You may also like