In the previous part of this tutorial series, you learnt how to implement the functionality to edit the blog post details.
In this part, you'll implement the functionality to delete an existing blog post and to implement the user logout functionality.
Point your browser to http://localhost:4200 and you will have the application running.
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.
Start by connecting to the MongoDB database using the Mongoose client.
When the user clicks the delete icon, you need to keep the post details in a variable. If the user proceeds with the delete option after confirmation, you'll make a call to the delete REST API.
Inside the show-post.component.ts file, define a variable called post_to_delete.
Define the method called setDelete inside show-post.component.ts to keep the post details to be deleted.
Once the post has been deleted, you need to refresh the post list, hence you need to make a call to the getAllPost method. You also need to close the popup once the deletion is successful.
First, import a reference to ViewChild and ElementRef in the show-post.component.ts file.
Define a variable closeBtn to create a reference to the popup close button.
Now, when the delete call is successful, you need to close the delete confirmation popup.
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.
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.
Now, inside the home.component.html file, add a method called logout to the log out button.
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.
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.