Adding Delete Confirmation

You have already added the delete icon to the listed blog posts. When the user clicks the delete icon corresponding to any blog post, you need to show a delete confirmation popup. If the user confirms the deletion process then only the blog post needs to be deleted.

Let's get started with adding a modal popup confirmation when the user clicks the delete button. Add the following modal popup code to the show-post.component.html file.

Save the above changes and restart the client server. Sign into the application and click on the delete icon corresponding to any blog post, and you will have the confirmation modal popped up.

Creating the Delete Blog Post API

Let's create a REST API endpoint to delete the blog post. In the server/app.js file, create a REST API endpoint to handle blog post deletion based on the blog post id. Here is how the REST API endpoint looks:

app.post('/api/post/deletePost', (req, res) => {
})

Start by connecting to the MongoDB database using the Mongoose client.

You'll make use of the findByIdAndRemove method to find the blog post using the id and delete it. Once the blog post has been deleted successfully, you'll return the status as a response. Here is how the REST API endpoint looks:

To call the service method from the ShowPostComponent, define a method called deletePost which will subscribe to the deletePost method from the ShowPostService. Here is how the deletePost method from the ShowPostComponent looks:

Save the above changes and restart the client and server application. Sign in to the application and click on the delete icon corresponding to any blog post. You will have a confirmation box popped up. Confirm the blog post deletion, and the blog post will be deleted and the blog post list will be updated.

Handling User Session During Sign-In

When the user signs in to the application, you'll keep the logged-in username in a localstorage. Modify the validateLogin method inside the LoginComponent to store the logged-in username in localstorage.

When the result from the API call is validated, add the following code to store the logged-in username.

In the HomeComponent's constructor method, you need to add a check for the loggedInUser local storage key. If not found, you need to redirect to the sign in page. Here is how the home.component.ts file looks:

Save the above changes and restart the client server. Try to access the home page by loading the URL http://localhost:4200/home in the browser window. You will be redirected to the login page.

Sign in to the application and click on the log out button. You will be logged out and redirected to the login page.

Wrapping It Up

In this part of the tutorial series, you learnt how to implement the blog post deletion by adding an icon to the blog post list. You also created a REST API for deleting the blog post details from the MongoDB database using the Mongoose client.

You have only implemented the very basic features of a blog application, and this application can be developed further to include many more features.

How was your experience learning to create a blogging application using Angular and MongoDB? Do let us know your thoughts and suggestions in the comments below.

And finally, remember that JavaScript is the language of the web. It’s not without its learning curves, but if you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.