Building simple TO-DO app with Ionic Framework 2. Part 1.

To-Do list application with ionic 2

ToDoMVC is the famouse resource collected a lot of examples how to build the simple ToDo list application with JavaScript MVC frameworks. But it doesn’t have Ionic 2 version. But I’m planning to introduce such example not only as code, but as complete Ionic 2 tutorial.


This is the first part of tutorial. Check out also the second part – Saving data locally with ionic framework 2
First of all, you’ll need to install Ionic and create the new project:

First of all, you’ll need to remove all pages generated by ionic cli and create a new one, we’ll call it ‘todo’. This means that inside the ‘app/pages’ folder you’ll have the single folder called ‘todo’ which will contains ‘todo.html’ and ‘todo.ts’ files:

2016-08-03_22-38-58

Planning the app.

Our application will have two main items:

  • Input form which allow us to add to-do items to the list
  • List of ‘to-do’ items. Click on each item will remove it (item will be ‘marked as done’)

So we’ll need to have at least three components – Input Form, Items List and Item. We’ll use built-in Ionic Framework 2 Components for Items List and Item, but we’ll create our first custom Ionic 2 Component – Input Form.

Let’s start with app main component:

What’s interesting here? There is one item:

We’re importing the new Angular 2 forms module. This requires to disable old forms API in app bootstrap. The new forms module was introduced in Angular 2 RC2 and it will completely replace the old one in the future. So I’m absolutely sure it’s a good idea to use new forms module.
Also we’re importing our primary component ToDoPage, which will be the app root component.

Now it’s time to remove standard page components added by ionic generator (inside app/pages folder). Also please don’t forget to remove SASS references to them from app/theme/app.core.scss.

ToDoPage component will contain ‘new task form’ and ‘tasks list’:

Tasks list is standard ionic List component, but here we have an interesting line:

This line will show our Ionic 2 custom component – Form Input, this component will fire only single event – toDoAdded, which will send the ‘todoline’ as an event argument.

ToDoPage component code is pretty simple:

This component imports our custom InputForm component. To allow us this component inside our ToDoPage component, we need to specify it in @Component annotation as a part of directives array.
ToDoPage component will have only single property – items, which is an array containing the list of todo items.
Also we have three methods:

This is an event handler for our InputForm component. It will add an item to items list when ‘add’ button on form will be pressed.

This is constructor. It will initialize our todo list with single ‘One’ item. You can remove anything inside this method and have an empty list on init.

And this item will remove todo item from array. We assume it’s the same as ‘mark an item done’/’complete task’. This method is pretty simple – we’re searching for item index in items array and removing it if index found.

Let’s continue with Input Form component. We’ll place it inside app/input_form folder. Component will consist of two files – input_form.html (template) and input_form.ts (component code):

Our InputForm component contains a lot of interesting. First of all, you can see (ngSubmit) attribute, which allows us to set the form submit handler (which is method of our InputForm class).
Out ion-input element have an [(ngModel)] attribute, which allows us to connect our InputForm component property with input value via two-way binding. Please note that ‘name’ attribute is also required by Angular to make this form work correctly.
Below the input you can see div with error explanation. It displays error if necessary. [hidden] attribute is responsible for this. This directive hides html element if expression it set to is true. In our case we have name.valid || name.pristine.
name.valid means that we have the valid value in this field
name.pristine means that the field value is unchanged since form first display.
So name.valid || name.pristine will show the error only in case if field value is invalid and was edited by user.

Now it’s time to take a look at InputForm component code.

We’re adding output toDoAdded. This will allow us to attach an event handler using the parent component. Almost every time when you need to send something outside of your component, it’s a good idea to use output for this.
New event should be raised using the EventEmitter, which is a part of Angular 2 and allows us to realize the Observer pattern – out component allows other components to subscribe to its state change.
Also here we have an empty class Task this class is just for storing our ‘todo name’ value, because ngModel requires use of nested properties like myObj.name.
And the last (and the most interesting thing) is addItem method. It does some interesting stuff for us:
– it removes the form from the DOM tree by assigning this.active = false;
– it emits the new event for the parent component using EventEmitter
– it resets form value and recreates the form in the DOM using the recreateForm method
The form reset method looks like dirty hack, but I got it from official Angular 2 forms tutorial.
If we’ll take the parts together, we’ll get the working simple todo list app. But we’ll need to somehow save the added items and load the on app startup.
Keep an eye on updates, I’ll cover this in the next part of this tutorial.
Download the source code for this tutorial: Download

Leave a Reply

Your email address will not be published. Required fields are marked *