Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Angular

Creating a Blogging App Using Angular & MongoDB: Show Post

This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Home
Creating a Blogging App Using Angular & MongoDB: Add Post

In the last part of the tutorial series, you saw how to write the REST API endpoint for user login. You used Mongoose to interact with MongoDB from Node. After successful validation, you saw how to use Angular Router for navigating to the HomeComponent.

In this part of the tutorial series, you'll create a component to list the blog post details on the home page.

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 should have the application running.

Angular Blogging App

Creating the Show Post Component

Once the user gets logged into the application, you'll display the HomeComponent. HomeComponent acts like a wrapper component for all the components displayed inside it. You'll be displaying the list of blog posts added by the user in the HomeComponent.

To display the blog posts, let's create a new component called ShowPostComponent. Create a folder called show-post inside the src/app folder. Inside the show-post folder, create a file called show-post.component.html and add the following HTML code:

Create a file called show-post.component.ts which will contain the ShowPostComponent class. Here is how it looks:

Import the ShowPostComponent in the app.module.ts file.

Add ShowPostComponent in the NgModule in the app.module.ts file. 

Modify the home.component.html file to include the ShowPostComponent selector.

Here is how the modified home.component.html file looks:

Save the above changes and refresh the client application. On signing into the application, you will be able to view the blog posts listed.

Angular Blog App - Show Post Component

Creating the Show Post Component Service

The data displayed in the ShowPostComponent service displays hard-coded data. You'll need a service to query the blog post list from the MongoDB database. Let's create a service for your ShowPostComponent.

Create a file called show-post.service.ts in src/app/show-post and add the following code:

Inside the ShowPostService, create a method called getAllPost, which will make the REST API call to get the blog post list. Here is how it looks:

Here is how the show-post.service.ts file looks:

Next, you need to write down the REST API to query the MongoDB collection to get the list of blog posts.

On the server side, let's get started by creating the model for the post. Inside the models folder, create a file called post.js. Require the Mongoose module and create a schema for the blog post and export it. Here is how the /server/models/post.js looks:

Export the above defined post.js file in app.js.

Create an API endpoint /api/post/getAllPost for fetching the list of blog posts. Use the mongoose client to connect to the MongoDB database.

Once you have the connection established, you can use the Post model to find the list of blog posts.

The .find callback returns the list of documents.

The documents returned will be in ascending order, so add a condition to sort the blog posts in descending order.

Once you have the list of documents queried from the database, return the data along with the status. Here is how the REST API looks:

Making the API Call

In the show-post.component.ts file, define an array list for keeping the results of the API call.

Import the ShowPostService in the ShowPostComponent.

Add the ShowPostService as a provider to the ShowPostComponent.

Define a method called getAllPost to make a call to the service method. Here is how it looks:

As seen in the above code, the result data is set to the posts variable.

Make a call to the above defined method from the ngOnInit method, so that the blog post details are fetched as soon as the component is initialized.

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

Rendering the Blog Posts

The MongoDB collection might not have entries to be queried. So let's add a few entries in the MongoDB from the mongo shell.

Enter the MongoDB shell by typing in the following command:

Once you enter the mongo shell, check the database available in the MongoDB database.

Select the blogDb database from the listed entries.

Create a collection named post.

Insert a couple of entries into the post collection.

Now let's bind our posts variable in the ShowPostComponent to the HTML code.

You'll be making use of the ngFor directive to iterate over the posts variable and display the blog posts. Modify the show-post.component.html file as shown:

Save the above changes and restart the client and REST API server. Sign in to the application and you will have the inserted records from MongoDB displayed on the home page.

Angular Blog App - Dynamic Blog Post Listing

Wrapping It Up

In this tutorial, you created the ShowPostComponent to display the blog post details from the MongoDB database. You created the REST API for querying the MongoDB database using the Mongoose client from the Node server.

In the next part of the tutorial series, you'll learn how to create the AddPostComponent for adding new posts from the application user interface.

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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.