The Angular Blog

It’s time to start work on the Blog App project. As mentioned in previous posts my first project is to create a blog web application from scratch on both front and back end. First using the MEAN stack, then trying out different tech combinations on front and back end. I’m thinking of trying; React, Asp.Net, MySql (instead of MongoDB) and perhaps Ruby on Rails.

At this time I’ve had good experiences with MongoDB, with Node and Express and with Angular. Based on these experiences I’ve decided to start by creating the frontend Angular app before determining the design of the backend nodeExpress server and the MongoDB schematic.

The Angular Blog

I’ve worked on the Angular Blog in small increments over the past weeks. My approach was to start from scratch but to refer to the Tour of Heroes tutorial for guidance with the process. After setting up a basic project the first task was to find a way to get a text editor running as this is the crux of the application. Other tasks would be to create the different views, and to load and save blog posts from a web-api. In the remainder of this post I will describe the tasks I’ve worked on and the issues I’ve dealt with. Outlined here:

  • Quill Editor
    • Getting the styling to work.
    • Getting data into the editor.
    • Getting data out of the editor
    • Preserving the layout
  • Web-api

The current version

First a quick walkthrough of the current version.

This is the app root page. Click home will display the list of all blog posts.

Hovering a blog post will highlight it. Clicking it will route to the editor view.

As can be seen the main text is in the editor field, the title is displayed above. Pressing the delete button with delete the post and take the user back to the previous page.

Clicking the “New Post” button in the navigation bar will create a new post on the backend and take the user to the editor view for that post.

As can be seen there is no title, and no way to add a title yet.

Changing the text in the editor will automatically send those changes to the backend.

Navigating back to the home view it is seen that the new post has been added, with a new ID (as seen in the upper right corner of the post).

Finding an Editor

A quick google search for text editor modules for Angular came up with only one or two suggestions, and the main one seemed to be ngx-quill by KillerCodeMonkey on GitHub.

It is an Angular TS wrapper of QuillJS a pure Javascript version. Eventually I think I should create my own wrapper, to be able to get full value of QuillJS but for now this will get me moving.

Complications

It turns out it was not nearly as easy to get running as I hoped. The documentation from KillerCodeMonkey (KCM) is pretty sparse. I was able to install the module, but actually using it turned out more difficult. They had supplied an example that you can also download. This allowed me to look at how he had setup and got me started.

The very first issue though is that the editor is all over the place without a proper style sheet. KCM writes:

"include theme stylings: bubble.css, snow.css of quilljs in your index.html"

They don’t really mention how. At the QuillJS page I found a link to a stylesheet that I then could link to in the html. I want, however, to have the stylesheet on my server, served with the page. At first I tried to link to the style sheet in the Angular component I had created to hold the Editor.

Each component has meta information with style sheet URLs. Unfortunately, as I had to learn the hard way, stylesheets are limited to the component they are referenced in. So when I use KCMs component in my component the style I define is not transferred to his.

To solve the problem I had to include the downloaded stylesheet in the global style.css file. It’s not a glorious solution, and I bet there is a better one, but for now it will get me moving.

Getting text in and out

When editing a blog post, the text of the blogpost obviously need to be input into the editor. Inspecting the example code from KCM I found out that the editor html element has a property that is bound to a variable in the TypeScript. In this case named textFormat.

The property “format” determines how the editor should interpret the string from the textFormat variable.

We also need to know when the user has edited the text. To that effect the editor supplies an event to subscribe to.

onContentChanged is called whenever the content of the editor is changed. To avoid too many calls to the backend debounceTime() is called. It delays the call until the event has been quiet for 400ms in this case. It supplies the content of the editor as a parameter.

To preserve the format of the content; the font size, headings and so forth, I save the data in html encoding.

communicating with the backend

For now I use the same web-api as used in the Tour of Heroes tutorial. I created a blog.service that will be injected into the text editor class.

The updateBlogPost function creates a http put request passing in the blogpost. The function returns an Observable, since it’s an asynchronous call. Here I learned another hard lesson. When I first called this function it didn’t update the data in the web-api. After an hours of debugging and researching I reread the tutorial and found that i had forgotten to subscribe to the Observable. A function that returns an Observable will only fire if something subscribes to the Observable.

Conclussion

I will end this blog post here and perhaps update it later with details on how I implemented creating new posts and deleting posts. The next feature I will work on for the Angular Blog will be a login system, so only an admin can create, update and delete blog posts.