Google+
4elements web design & consultancy

4elements

Blog

  • dislike -4 15

    Creating a Blogging App Using Angular & MongoDB: Add Post

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

    In the previous part of the Angular blog tutorial series, you learnt how to create the ShowPostComponent to display the list of blog posts on the home page. You fetched the records that were inserted from the MongoDB shell using the created REST API endpoint.

    In this tutorial, you'll be creating a new component called AddPostComponent to provide the user interface to add a new blog post to the MongoDB database.

    Getting Started

    Let's get started by cloning the source code from the previous 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 should have the application running.

    Creating the Add Post Component

    Let's get started by creating the AddPostComponent. Create a folder called add-post inside the src/app folder. Inside the add-post folder, create a file called add-post.component.ts and add the following code:

    Create a file called add-post.component.html and the following HTML code:

    You'll be showing the add post component as a popup.

    Now you need to add the AddPostComponent to the NgModule. Import the AddPostComponent in the app.module.ts file.

    Add the component to the NgModule declarations list. Here is how it looks:

    To trigger the add post popup, you have already added the data-target attribute to the button in home.component.html.

    Save the above changes and restart the application. Log into the application and click on the Add link in the home page. You will have the AddPostComponent displayed as a popup.

    Angular Blog Application - Add Post Popup

    Implementing the Add Post Functionality

    Add the ngModel directive to the input elements for title and description.

    Add a click directive to the button for calling the method to save the blog post.

    Import the Post model from src/app/models/post.model.ts in the add-post.component.ts file.

    Define the post variable in the add-post.component.ts file.

    Define the addPost method inside the add-post.component.ts file. From the addPost method, you'll validate the entered title and description and make a call to the service method to call the REST API. Here is how the method looks:

    Let's create the service file for the component AddPostComponent. Create a file called add-post.service.ts and add the following code:

    Inside the AddPostService, create a method called addPost to make the REST API call.

    As seen in the above code, you have made use of the HttpClient to make the API call and return the Observable.

    In the add-post.component.ts file inside the addPost method, you'll subscribe to the addPost method from the add-post.service.ts file.

    Here is how the add-post.component.ts file looks:

    Creating the REST API for Add Post

    Let's create a REST API end point for adding the blog post to the MongoDB database. In the server/app.js file, create an API end point as shown:

    First, you need to connect to the MongoDB database using the Mongoose client.

    Once the connection has been established, you need to create a model object using the Post schema defined in the server/model/post.js file. 

    As seen in the above code, you created the Post object using the title and description passed in from the request req object.

    Call the save method on the Post object to save the entry to MongoDB.

    As seen in the above code, once the save method callback is called with no error, it will return the success message along with the returned object doc.

    Here is how the REST API end point finally looks:

    Save the above changes and restart both Angular and Node servers. Sign in to the application and try to add a new blog post. Once you click on the Add button, check the browser console and you will have the success response logged.

    When the blog post details are added to the database successfully, you need to close the popup. In order to close the popup, there is a close button which you need to click programmatically.

    You'll be using the @ViewChild decorator to access the close button.

    Import ViewChild and ElementRef in AddPostComponent.

    Inside the AddPostComponent, define the following variable:

    Initiate the closeBtn click using the following code:

    Add the above code to the success callback of the addPost method. Here is the addPost method from add-post.component.ts.

    Save the changes and restart the client server. Log into the application and try adding a new blog post. Once the blog post details have been saved successfully, the popup will close.

    Refreshing the Blog List

    One thing to note is that the newly added blog post doesn't show up in the blog post list. So you need to add a trigger to notify when to update the ShowPostComponent. You'll be making use of a common service to communicate between the two components.

    Create a folder called service inside the src/app folder. Create a file called common.service.ts with the following code:

    As seen in the above code, you have declared a Subject called postAdded_Observable to keep track of the new blog post addition to the database. Whenever a new blog post is added to the database, you'll call the notifyPostAddition method, which will notify the subscribers about the update.

    Import the CommonService in app.module.ts and include it in the NgModule provider's list. Here is how it looks:

    Import CommonService in the show-post.component.ts file and initialize it in the constructor method.

    Inside the ngOnInit method, subscribe to the postAdded_Observable variable and load the getAllPost method. Here is how the ngOnInit method looks:

    Import CommonService in the add-post.component.ts file and call the notifyPostAddition method once the blog post has been added. Here is how the addPost method from the AddPostComponent looks:

    Save the above changes and restart the client server. Log in to the application and add a new blog post. Once added, the blog post list gets updated with the new blog post.

    Wrapping It Up

    In this tutorial, you created the AddPostComponent to add the blog post details to the MongoDB database. You created the REST API for saving a blog post to the MongoDB database using the Mongoose client.

    In the next part of the series, you'll implement the functionality to edit and update the blog post details.

    Source code for this tutorial is available on GitHub.

    How was your experience so far? Do let me know your valuable suggestions in the comments below.

    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