Todo Application using Materia

Part 2: Build a frontend with Angular

Website preview

This post is the second part of the Todo Application with Materia tutorial. In this part we will create the frontend/client part of our Materia todo application.

I — Create an angular project

Materia Designer allow us to initialize a frontend project with the most famous web frameworks: Angular, React or Vue. In our case we will generate a new Angular application.

Navigate to the website section and press the Angular button, a modal with some configuration settings will be opened. By default ‘two packages structure’ option is selected, it means that the generated project will be created in its own folder with its own package.json file (this is recommanded as it brings more flexibility):

Generate a new Angular frontend project (accelerated)

Materia Designer generates an Angular application following this steps:

• Install the latest @angular/cli at the root of your Materia application,
• Use the installed @angular/cli to generate a new angular app. This is similar to run: ng new <your-angular-app-name>,
• The generated angular folder project is renamed to match the wanted output folder name,
• The angular project is built,
• materia.json configuration file is updated with the client settings.

Once the Angular application generated our materia.json configuration file should look like this:

materia.json configuration file

We can notice a new client key in the configuration file with the following properties:

• packageJsonPath: path of the folder containing your frontend/client package.json file,
• www: path of the folder containing your final frontend/client sources,
• build: whether or not your frontend/client has a build system (this property is needed only if no packageJsonPath is provided, this is the case when you have a monopackage structure),
• scripts: list of your client scripts present in your client package.json file,
• autowatch: whether or not the watch script should be launch automatically.

II — Create an Angular http service

We will first create a new todo.service.ts file to perform the various http calls, needed to interact with our server:

In order to make it works we have to add the HttpClientModule to our main module:

III — Display todos

We will use @angular/material to display our todos with a nice interface. Materia Designer don’t automate this task for us for now. So, the easiest way to add it, is to use @angular/cli with the following command: ng add @angular/material.

Add @angular/material in visual studio code

After @angular/material installation, we will add the following modules to help us display our todo list with a nice user interface:

• MatToolbarModule,
• MatIconModule,
• MatDividerModule,
• MatListModule.

Our app.module.ts file should now looks like this:

Of course in a real life scenario we would prefer making a dedicated shared module with all @angular/material modules we use.

We can now modify our main app.component files like the following:

Build your Angular app by clicking the build button in the website section or by running the build script in our client folder:

Our angular application is now displaying a nice list of our todo tasks with an icon indicating whether or not the task is done.

IV — Add todo creation functionality

What we want to achieve:

• to be able to add tasks through a material dialog,
• the dialog should have a form with a single required input called ‘task’,
• the form inside the dialog should perform an http call to our post server http endpoint on submit,
• after the http call succeed, our modal should close and our list of todos updated.

To achieve this we will add and use ReactiveFormsModule from @angular/forms and the following @angular/material modules:

• ReactiveFormsModule,
• MatFormFieldModule,
• MatInputModule,
• MatButtonModule,
• MatDialogModule.

Our app.module.ts file now looks like the following:

Our app.component template now looks like the following:

We only added a button on the header and a ng-template html tag wrapping our new todo form. We will use this template with MatDialog to prompt a dialog when the add button is clicked:

We use angular @ViewChild() to get a reference to our todoFormTemplate and use it with MatDialog.

The addTask() method is responsible to add new task on submit, only if our form is valid, close the dialog and refresh our list if the api call succeed.

At this point our app look like this after rebuilding sources:

todo with creation

V — Delete existing tasks

What we want to achieve:

• Delete individually existing tasks by pressing a delete button.

We don’t need to use new modules to add this functionality. We will just add a delete button on each list item, use the delete method of our todo service and refresh our list if the http call succeed.

The modified app.component.html and app.component.ts should now looks like the following:

After rebuilding our client sources our website should looks like the following:

todo with deletion

VI — Toggling task done status

The last functionality we have to implement is the ability to toggle the done status of our tasks:

• We will add a button on each list item to be able to toggle the done status,
• The button should display ‘mark as todo’ if the task status is ‘done’ and ‘mark as done’ if the task status is ‘not done’.

Like the precedent step, we don’t need to add new modules to add the wanted functionality.

Our final website should looks like this at this point:

final todo website

Conclusion

We just made a basic todo app with Materia Designer, using the Angular Framework for the front end, and an SQLite database in the server side.

For a real life scenario we can list the following list of improvements that can be made:

• Split the code in several files, in particular make dedicated components (TodoListComponent, TodoFormComponent…) and modules (Shared UI module with all used @angular/material modules),
• The interaction with the server is fast because the application is running locally, it may take more times when running in production. In this perspective loading indicators could be added for various tasks: initial tasks listing, on delete or on toggling done status. It will greatly improve the overall user experience,
• Add a custom validator to avoid adding duplicated tasks,
• Display potential errors with MatSnackBar component,
• Use a global state and don’t perform an http call every time we have to list the todo tasks.

The source code of this Materia application can be found here.

Thanks for reading and happy coding !

If you like this tutorial, let us know by clapping this article and don’t hesitate to give us your feedback !