Budhana Tech, LLP

Creating, Listing, Editing, Deleting todos: Todo list App with Loopback 4 and Angular 7 Part 3

In this 3 part tutorial series we are going to build a very simple Todo list app with the latest frameworks available for backend and frontend. For backend we will be using Loopback 4 and for frontend we will be using Angular 7. Please note you will require to have the following

  • Loopback 4 (click this to know how to get it).
  • Angular 7 (click this to know how to get it).

In this part we will create the core functionality, without waiting anymore lets get our hands dirty.

Angular Material

We will be using Angular material – angular’s own theme engine, tested across various browsers, this could make our lives a lot easier when comes to html designing.
First, go into the folder todolist-app-webapp-frontend and open the terminal/ console, then fire commands in following command.npm install –save @angular/material @angular/cdk @angular/animations
Second, go into the app.modules.ts file inside the src/app folder and include BrowserAnimationModule in the imports array, as depicted in the image below.

Third, open style.css inside the src folder and include the following line – which will enable pink theme for Angular material UI.@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Angular part

First, we would create a todo class – this will give us a structure with the help of which we would move todo around the app, create a folder named shared inside the src/app folder, then create a file tods.ts inside src/app/shared folder and add the following code.

Second, we will code our service file todo.service.ts which will communicate with the server as following. The methods addTodo, listTodo, markTodo all return observables.

Third, as we are using angular material we will imports few modules will be useful for our app as detailed in the below pic. Please note here there is a module imported named FormsModule this module is not Angular material specific this module is required as we will be using two-way binding functionality of angular using the directive ngModel

Fourth, we will code our todo.component.ts file and create methods which will handle the UI controls and communicate with the service we created earlier.

Fifth, we will code our todo.component.html which will create our UI part, we will use various angular material components, which will make our lives a lot easier when it comes to UI, following is the code.

Finally, add some CSS to make things look a bit nicer as follows.

If you have correctly followed the above steps, you are now ready to lauch, with loopback server running, run the command ng serve –open from the folder where angular app is kept
If everything goes well, you will the a screen something like the following – please note as its your first time there will be no todos to list in the List oftodos so it will display blank

Now, you can play around with you newly created todo app, add some todos, mark them as done or not done. Note that there is no option to edit, delete a todo that i have kept for you to ponder around, and please let me know if you face any trouble while doing it.
So, that would mark as the end of Part 3 as well as the end of this series, hope you were able to get something out of it.
Find code at our github repo here: https://github.com/Budhanatech/angular7loopback4todolist
Please leave a comment below if you have something wandering around your head, may it be something crazy. Also please let us know if you like this post and anything we need to improve upon and what kind of blogs would you be interested in future. You can leave a message in the chat box as well.
#angular#loopback#MEAN#backend#frontend#todoEnding with a quoteEncourage instead of criticising, Understand instead of judging,Initiate instead of waiting

Leave a Comment

Your email address will not be published.