How to Create a Personal Blogging Website: Front-End (Angular) #2

Creating a personal blogging website with Django and Flask

Creating a personal blogging website with Django and Flask

First part: How to Create a Personal Blogging Website: Back-End (Flask/Python) #1

In this article, we are going to create the client-side part of the personal blogging website using Angular.

Before starting to code the front-end part, I want you to clone or download the starter code for the front-end. This starter code will contain HTML and CSS of all the components we are going to create in this article. Along with HTML and CSS, I have also provided routing for the application. This way, it’ll be easier for me to guide you through the article instead of asking you to add HTML and CSS at different stages of the application.

So go ahead, clone/download the starter code:

Requirements for the front-end:

  • Angular (I’m using angular 8 for this application)
  • A text editor (I’m using Visual Studio Code for this application)

Next, run the following command to install all the dependencies related to the application:

Now that we have installed all the dependencies for the application, let’s start writing some code.

Let’s add the functionality to the admin dashboard. For doing this, inside admin/admin.component.ts add the following code so that the component looks like this:

In the above code, we have created two functions named open_dialog and sign_out. The open_dialog function is called when the sign-out link is clicked.

Notice we imported AuthService in this component, and the AuthService implements the logout function. Since there is no code inside AuthService, the logout function will not be executed yet.

Next, we are going to create the add-blog page. Presently, when clicked on the Add Blog navigation link in the dashboard, this is how the add-blog page looks:

The add-blog page looks

The add-blog page looks

As one can see from the above image, there are input fields for title, feature image, and tags but, there is no input field for the content of the blog. We require an inline text-editor for the application so that the admin user can write the content of the blog inside the text-editor. There are a number of inline text-editors available online but the one I’ve used for the application is Syncfusion RichTextEditor.

For installing the text-editor run the following command:

Then, inside the imports array of the app.module.ts file, add RichTextEditorAllModule. Also, add the following import statement in app.module.ts:

Next, inside the <head> tag of the index.html file, add the following line:

Now that we’ve installed the inline text-editor, let’s add the editor inside the code, for doing this, inside admin/add-blog/add-blog.component.html, look for the div container named add-blog-input-content and inside the container, add the text-editor like this:

In the above code, we bound the value of the text-editor to the variable called content which we are going to define in the component.

Next, as one can see in the image above, we have provided an input to upload a feature image but, as seen in the first part of the blog, our back-end saves the feature image as a string in the database since we are going to use cloud storage to store the feature image.

In this application, I’m going to use Imgur to store feature images for the blog. For storing images in Imgur, follow the steps given below:

  1. Create an account at
  2. Register an application at (While registering, select the Authorization Type as OAuth 2 authorization without callback URL)
  3. After registering an application, one will receive a Client ID. We will use this client id to send requests to the API.

Note- Remember that if one is using Imgur for a commercial purpose, then one needs to check the Imgur API since the method I have used here works for a non-commercial application.

Next, we are going to add all the HTTP requests to the Imgur API inside our feature-image service. For doing this, inside api-calls/feature-image.service.ts,
add the following code:

As one can notice in the above code, we have created a function called upload_image which takes a file as an argument and sends the HTTP request to the Imgur API with the client-id in the header of the request.

Note- Change the variable client_id in the above code, with the client_id you received after registering an application.

Now that we have completed setting up the input fields of the content blog and the feature image, let’s add the functionality inside the add-blog page.

Inside AddBlogComponent class of the admin/add-blog/add-blog.component.ts, add the following code:

Let’s breakdown the code,

The functions open_dialog and open_alert_dialog open a dialog box and an alert-dialog box respectively so that we provide a way for confirming the decisions and providing an acknowledgment for the admin user.

Next, the processFile function takes in the feature image selected by the user and stores it in the variable called selectedFile. Then, this function calls the previewImageLoad function which sets the preview_image which is useful in showing the user which feature image was selected.

Then comes the submit_blog function, which in turn calls the function inside the BlogService called add_blog with the arguments set as the blog properties.
Since we have not added the add_blog function inside BlogService, the editor will show an error. Therefore, let’s add the add_blog function inside BlogService.

Inside the BlogService class of api-calls/blog.service.ts, add the following code:

Note- In the above code, I’ve used localhost:5000 since that was the port number my flask server was running on. Change the port number to the port number your server is running on.

Next, let’s create the all-blogs page, the all-blogs page will look like this after completion:

All-blogs page

All-blogs page


As one can see, this page displays all the blogs that the admin created and provides options for editing and deleting the blog. We will only add the deleting functionality in this component since the editing/updating part will be handled by the update-blog page.

Inside admin/all-blogs/all-blogs.component.ts, add the following code:

The code above is pretty straight forward. The load_all_blogs functions load all the blogs using the get_all_blogs function of BlogService and the delete_single_blog function deletes the specific blog using the delete_blog function of BlogService.

Let’s add the delete_blog and get_all_blogs functions inside BlogService:

Next, for updating the blog, add the following code inside admin/update-blog/update-blog.component.ts:

Let’s breakdown the code, when the UpdateBlog component loads, the id present in the params is captured and stored in the blog_id variable. Then the get_blog_info function is called which loads all the information related to the blog with the specific blog_id. Other functions are similar to the ones used in add-blog.component.ts.

Note- Don’t forget to add the following code inside the update-blog-input-content container of the update-blog.component.html file:

The get_single_blog and update_blog functions in the above code need to be added inside BlogService:

Now that we have completed most of the CRUD operations the admin user can execute, let’s move onto building the homepage and the blog-details page.

After completion, the homepage will look like this:




On clicking any of the blogs, we’ll be redirected to the blog-details page which will show the complete blog. Let’s add functionality to the homepage first.

Inside homepage/homepage.component.ts, add the following code:

As seen in the code above, after the homepage component is initialized, the load_all_blogs function loads all the blogs written by the admin.

After completion, the blog-details page will look like this:

Blog-details page

Blog-details page

For adding functionality to the blog-details page, add the following code inside blog-details.component.ts:

We have completed most of the pages of the application but, there is one important feature that needs to be added. Since we created an admin user in the back-end, I want to protect the admin routes in the front-end(add-blog, update-blog and, delete-blog). For protecting the routes, we are going to create a login page and the admin user needs to login with the email and password created in the back-end. Only if the user is logged in as admin, he/she can create/update/delete a blog.

For adding login functionality, the following code needs to be added inside login/login.component.ts:

In the above code, the submit_form function executes the login function from AuthService which returns a token after logging in. The token received, is then stored as auth_token in the localStorage of the client-side.

We are storing the auth_token in the localStorage so that the CRUD requests to the back-end can be sent with auth_token in the header of the request.

We have not added the login function in AuthService, so let’s add the login function. Along with the login function, I’m adding the logout function and is_logged_in function as well.

Add the following code inside auth.service.ts:

logout function removes the auth_token from the localStorage and whereas, the is_logged_in function checks whether the auth_token is available and if the auth_token is available, checks whether the token is expired or not and returns a boolean.

For the above code to run, you have to install auth0/angular-jwt:

Also, inside the imports array of app.module.ts, add the following code:

By adding the above code, all the HTTP requests will now be sent with the auth_token in the header. This way, the admin user can perform CRUD operations.

Note- Don’t forget to import JwtModule from auth0/angular-jwt inside app.module.ts.

Finally, we need to create a Guard service that will redirect the user to the login page if the user is trying to access the admin routes without being logged in.
For doing this, add the following code inside auth-guard.service.ts:

Also, inside the routes array of the app-routing.module.ts, add the canActivate property to the admin path so that the admin path looks like this:

There you go, we have created the front-end part of the blogging website. Run the flask and angular servers to see the magic.

You can clone the GitHub repo of the complete code from:

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles


An Introduction to Clustering in Node.js

Picture your Node.js app starts to slow down as it gets bombarded with user requests. It's like a traffic jam for your app, and no developer likes ...


JAMstack Architecture with Next.js

The Jamstack architecture, a term coined by Mathias Biilmann, the co-founder of Netlify, encompasses a set of structural practices that rely on ...

Rendering Patterns: Static and Dynamic Rendering in Nextjs

Next.js is popular for its seamless support of static site generation (SSG) and server-side rendering (SSR), which offers developers the flexibility ...


Saurabh Thakur March 5, 2020 at 1:40 pm

how to create new function to get adminrole.

Vivek Bisht March 5, 2020 at 7:45 pm

Though your question is not clear enough, I suppose you want role-based authorization for the application. I would suggest you add role-based authorization in the back-end of the app (In this case, I have used Flask as back-end). In Flask, there is a library called Flask-User, which is quite easy to set up and gives you the feature of adding role-based authorization to the app. I suggest you go through the docs of that.

global leads June 5, 2020 at 7:02 am

I was able to find good information from your blog articles.

Toyaya One July 11, 2020 at 5:19 am

Hi ! Thank you very much for these 2 lessons.
I’m beginner in Python , in order to Practise, I want to create my own blog .
I would like to understand these codes that you’ve provided , do you have a suggestion in where do I have to start ? Like course or some free online tutorials in order to understand these codes .
Thank you in advanced .

Vivek Bisht July 15, 2020 at 8:54 pm

If you have just started learning python, then for python, try learning theories from w3schools or python courses from Mosh hamedani, for applying python concepts, try using coding platforms like Hackerrank and Codility.

Toyaya One July 26, 2020 at 4:14 am

Great cool. Thank you very much for these suggestions.

Ivaylo Ivanov September 24, 2020 at 5:36 pm

After running ‘ng serve’ it shows me black white page at: http://localhost:4200/
Any suggestions where might be the problem?

Ivaylo Ivanov September 24, 2020 at 6:03 pm

Also no errors.

Vivek Bisht October 7, 2020 at 8:40 pm

Hey there. Sorry for the late reply.

Like you said, blank page is getting rendered when you run the application, it’s because inside the homepage.component.html file, you’re trying to render the all_blogs variable using for loop.

When you run the application for the first time, the all_blogs variable is empty. Since you didn’t add any blogs/articles to your application yet. Therefore, an empty page gets rendered.

So now there are two options,

First one, go to ‘/admin’ route and add a blog. Then go back to the page and refresh it. You will see the blog appearing instead of a blank page.

Second option (Better option), go to homepage.component.html file, add an if condition so that you render the all_blogs variable only if the length of all_blogs variable is more than 1.
Also, add an else-statement block. So that, in case when the number of blogs in the database is empty, you give a warning to the user/yourself that “There are no blogs available to show, go to ‘/admin’ route and add blogs”.

Try this and let me know if it works.

Also, if there are many doubts you can go ahead and ask.

John Paitel February 18, 2021 at 10:47 pm

Question – I am a long time programmer working on learning python, so I understand the structures etc. I would like to run this from a raspberry pi as an always up website, what would be the best way to accomplish that? I’ll set the rPi up to run headless and remote into it for the distribution/programming. (I’m also thinking of setting up a mini ci/cd pipeline to publish changes, but that is probably overkill).

Golah Mark April 29, 2021 at 2:45 pm

please is there ang upgrade to this project like angular 11

Nawaz Shareef September 12, 2021 at 7:43 am

That’s a clean work. What if the content we are creating in text editor has images alongside text. Can we store it in the same way?

Huy Nguyen Huynh October 15, 2021 at 7:12 am

How to combine backend and frontend, and How to structure the application directory of backend and frontend ?. I run frontend and show http://localhost:4200/admin/add-blog screen but when input title, content.. cannot add blog. it’s stuck where the cursor, and cannot save a blog.

Sign in

Forgot password?

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy