Google+
4elements web design & consultancy

4elements

Blog

  • 16

    Creating a Blogging App Using Angular & MongoDB: Edit Post

    4elements | web design The Hague blog • Creating a Blogging App Using Angular & MongoDB: Edit Post

    In the previous part of this tutorial series you learnt how to create the add post component to add new blog posts. You learnt how to create the REST API endpoint to add a new post to the MongoDB database.

    In this part of the tutorial series, you'll learn how to implement the functionality to edit an existing blog post from the blog post list.

    Getting Started

    Let's get started by cloning the source code from the last part of the tutorial series.

    Navigate to the project directory and install the required dependencies.

    Once you have the dependencies installed, restart the client and server application.

    Point your browser to http://localhost:4200 and you will have the application running.

    Adding the Edit Post View

    In the ShowPostComponent, you'll add two icons for editing and deleting the blog post. You'll make use of Font Awesome to display the edit and delete icons.

    Download and include the font awesome folder in the assets folder.

    Font Awesome In Assets Folder

    In the src/app/index.html page, include a reference to the font awesome CSS style.

    Now modify the show-post/show-post.component.html file to include the HTML for the edit and delete icons.

    Here is how the show-post.component.html file looks:

    Save the above changes and restart the client application. Log into the application and you will be able to view the edit and delete icons corresponding to each listed blog post.

    Angular Blog App - Edit And Delete Icon

    Populating the Edit Detail in a Popup

    When the user clicks the edit icon corresponding to any blog post, you need to populate the blog post details in the add post popup for updating.

    Add a click method to the edit icon.

    Inside the CommonService, you need to define an observable to keep track of when the edit button is clicked. Define the observable as shown:

    Define another variable to keep track of the post to be edited.

    Whenever the edit button is clicked, you'll keep the post to be edited in the CommonService and trigger the observable to notify of post edit. Define two methods to set the post to be edited and to notify post edit.

    Inside the click method, you'll call the setPostToEdit method from CommonService. Here is how the editPost method looks:

    You will have the post detail in the common service when the user clicks the edit button. To show the add post popup for updating, you need to click the add post button programmatically.

    Inside the home/home.component.html file, add a # identifier to the add post button.

    Import ViewChild and ElementRef inside the home.component.ts file.

    Define a reference to the add button inside the home.component.ts file.

    Inside the HomeComponent constructor, subscribe to the postEdit_Observable from CommonService. On calling the postEdit_Observable subscription callback, invoke the add button click to show the popup. Here is how the home.component.ts file looks:

    You need to subscribe to postEdit_Observable in the add-post.component.ts file to set the post to be edited on the post variable. Here is how the ngOnInit method in add-post.component.ts looks:

    Save the above changes and restart the client server. Log into the application and click on the edit button against any blog post. You will be able to view the post details populated in the add post popup.

    Angular Blog App - Update Post

    Creating the Update Post REST API

    Inside server/app.js, let's define another REST API endpoint to update post details based on the ID of the post. Here is how it looks:

    Let's first use Mongoose to connect to the MongoDB database.

    Once the connection is established, you make use of the update method on the Post model.

    You'll be updating the post based on the ID of the post passed. As seen in the above code, you have specified the post _id to be updated. In the second option, you have specified the fields to be updated, which are title and description.

    Once the details get updated, you'll return the status along with the number of rows affected during the update. Here is how the REST API endpoint for the post update looks:

    Making the REST API Call to Update

    The ID returned for each post from the MongoDB is _id, so you need to modify the id of our model src/app/models/post.model.ts. Here is how it looks:

    When you click the add post button, the method called will be addPost. Inside the addPost method in add-post.component.ts, you'll check if the post object has an _id. If an _id is present then you need to call the update method from the service, else you'll call the add post service method.

    Create a method called updatePost inside the add-post.service.ts file.

    Here is how the modified addPost method from the add-post.component.ts file looks:

    Save the above changes and restart both Angular and Node server. Log into the application and try editing a post. You will have a popup displayed to edit the details on clicking the edit button. Click the add button and the details will be updated and displayed in the blog post list.

    Wrapping It Up

    In this tutorial, you implemented the functionality to update the existing blog post details. You created the back-end REST API endpoint to update the blog post details based on the blog post ID. You made use of the Mongoose client to update the details of the blog post in the MongoDB database.

    In the next part, you'll implement the delete post and log out functionality.

    How was your experience so far? Do let us know your thoughts, suggestions, or any corrections in the comments below.

    Source code from this tutorial is available on GitHub

    martijn broeders

    founder/ strategic creative at 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 06 38 55 28 54

By - category

    By - date