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.

git clone https://github.com/royagasthyan/ShowPost AddPost

Navigate to the project directory and install the required dependencies.

cd AddPost/client
npm install
cd AddPost/server
npm install

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

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:

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.

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.

import { Post } from '../models/post.model';

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

public post : Post;

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:

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.

import { Component, ViewChild, ElementRef } from '@angular/core';

Inside the AddPostComponent, define the following variable:

@ViewChild('closeBtn') closeBtn: ElementRef;

Initiate the closeBtn click using the following code:

this.closeBtn.nativeElement.click();

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:

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.