Create A Simple Todo List App Using Ionic 2 For Android And iOS

I’ve created a few tutorials around Ionic 2 while it was in its early alpha stage up until now.  These tutorials explain how to use the bits and pieces that the framework or Angular 2 offers, but I never demonstrated how to make a functional application.  Seeing how to put the pieces together makes a huge difference when learning a new technology.

We’re going to see how to build a simple todo list type Android and iOS application using Ionic 2, Angular 2, and TypeScript.

Creating a New Ionic 2 Project

To make things as easiest as possible to understand, we’re going to start with a fresh project and work our way up.  Using the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

There are a few things to note in the above commands.  First you’ll notice the --v2 tag during the project creation.  This means we will be creating an Ionic 2 project that uses TypeScript.  It is only possible to use this tag if we have the correct Ionic CLI.  The second thing to be aware of is around the iOS platform.  We cannot build for the iOS platform unless we are using a Mac computer.

Ionic 2 Simple Todo List

Creating the Main List Page

We are going to be creating a two page application, but for now we’re going to focus on the main page.  This page will be responsible for showing the list of todo items.  We’ll also be able to remove todo items from this page as well.

Create the following directories and files whatever way makes sense for you.  I’m on a Mac, so I’m going to use mkdir and touch to do this from the Terminal.

Let’s focus on the logic file first.  Open the project’s app/pages/todos/todos.ts file and include the following code.  Don’t worry, we’ll break it down after.

We haven’t created the page yet, but let’s go ahead and import it anyways.  We’re not going to try to run the application right away so we will be fine.  We’re also importing the NavController which will allow us to navigate to the AddPage that we’ve yet to create.

In the @Page section we define the HTML file that will be paired with this particular TypeScript file.

This brings us to the actual TodosPage class.  We will have one public variable being our list of todo items.  By making it public we can access it from the HTML file and render it to the screen.

In the above constructor method we aren’t actually initializing any variables, but we are defining the NavController to be used throughout our application.  You might be wondering why we aren’t initializing the todoList variable in the constructor method, but instead the following:

We’re using the framework reserved onPageDidEnter method because we want to hit two birds with one stone.  The page constructor method will only fire on navigation push events, or in other words, navigate to events.  When we try to navigate back, the constructor won’t fire.  The onPageDidEnter event will trigger in both scenarios which is why we are reading the todo items from local storage in it.  If there is nothing in local storage we will initialize an empty array.

The next method we see is the delete method.  It will be used for deleting items in the list based on whatever index is provided.  Using the splice method we can delete an item at a particular index.  Once this is done, we will re-serialize the array and store it in local storage.

Finally we have the add method.  This is where we will perform the navigation to the AddPage that we’ll create soon.

Now we can focus on creating the HTML file that goes with the TypeScript file we just created.  Open the project’s app/pages/todos/todos.html and include the following markup:

Let’s break down the HTML file like we did the TypeScript file.  So starting with the page’s navigation bar:

We define the page title and add a single button to the right side of the header.  This button will only be an icon, but when it is pressed it will trigger the add function that we created.  This is made possible from the (click) tag.

Now we’re brought into the core page content.

We have an ion-list in the above, but it is not a standard list.  Each element in the list will be a sliding item, meaning we can swipe it.  We create each item in the list by looping through the public todoList array.  We also define our looping index as it will be relevant when it comes time to delete items.

When a list row is swiped, it will expose a button which a trash icon.  When this button is pressed, the delete method will be called and we will pass the index of the list item that was pressed.

When it comes to our stylesheet, open the project’s app/pages/todos/todos.scss and include the following class:

We aren’t using any special styles, but at least we know it is available to us should we decide we want to make some changes.

Creating the Page for Adding Todo Items

Now let’s have a look at creating the second page of our application.  This page will be responsible for adding items to the local storage which will then be loaded in our main page.  You don’t have to use local storage.  You can use SQLite or another technology if you’d like, but for this example we’ll just stick with local storage.

Just like with the first page we need to create some directories and files.  Again, I’ll be using mkdir and touch, but you create them however you want.

With everything created, open the project’s app/pages/add/add.ts file and include the following code:

Just like with the TodosPage class, let’s break down this file as well.

In the @Page section we are defining the HTML file that will be paired with this particular TypeScript file.  Most of what we are doing happens in the AddPage class.

In the class we have two variables, one public and one private.  The todoList variable is private because we don’t need to render it on the screen, but we do need to use it.  The todoItem variable is public because we do need to bind it to a form on the screen.

Unlike the previous page, all of our initialization logic will happen in the constructor method.  This is because pop events will never happen on this page.  You could use onPageDidEnter if you really wanted to.

In the save method we first check to make sure the todoItem variable has data in it.  If it does, push it into the list and save it to local storage.  When saving is complete we will pop back in the navigation stack to the previous page.

Now we can focus on the HTML file that is paired with this TypeScript file.  Open the project’s app/pages/add/add.html file and include the following markup:

Just like last time, we’ll break down the HTML to understand what is happening.

In the navigation header we have a title and a single button to the right of the title.  This button will be a checkmark to represent it is used for saving the data.  When the (click) event is triggered, the save method will be called in the TypeScript file.

In the core content we have a list of input elements, or in our case a single input element.  It is bound to the todoItem variable in our TypeScript file via the [(ngModel)] tag.

When it comes to our stylesheet, open the project’s app/pages/add/add.scss and include the following class:

We aren’t using any special styling, but at least we know it is available to us.

Updating the Application Theme

We didn’t specifically add any styles, but we layed down the foundation for the future.  This means we should add them to the theme collection.

Open the project’s app/theme/app.core.scss and include the following lines:

Now we can make our application more beautiful than it already is if we wanted to.

Updating the Parent Application Component

When we created our project we started with a HomePage page.  We aren’t using it so we want to replace it with the TodosPage that we had created.

Open the project’s app/app.ts file and include the following code:

Essentially all that changed was the references to HomePage.  After updating them, the application should be good to go.

Conclusion

You just saw how to create a simple Ionic 2 TypeScript application.  It accomplished quite a bit.  We saw how to navigate between pages, persist data, as well as delete data.  As mentioned in the tutorial, if you wanted to use something beyond local storage, like SQLite, you can without any issues.

With this foundation, you should be able to take these skills and build a more complex application that is more useful to people in one of the app stores.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Any reason why you didn’t use the CLI to generate pages?

    • Honestly didn’t know about it until after I wrote the tutorial. My guide isn’t too difficult without it, so I probably won’t include it this time around.

      I also prefer to use tooling not in beta. To many potential changes to keep up with in the article.

  • Prince Lamba

    Hi Nic,
    I am following your posts all are awesome ,Are you having any post regarding file Logger for having error logs in Ionic or Cordova

    • I honestly have no idea what you’re asking

      • Prince Lamba

        I need to show the logs(console.log) in a particular file which will automatically saved in device which contains all the error logs and crash reports of my ionic app .Are you having any refrence or example for that ,Thanks in Advance

  • Andrew P

    Great tutorial, but this line give me an error:

    I inspect the page and it says “promise rejection” is the issue. Any ideas?

    • Can you share the full logs?

      • Andrew P

        Sure.

        • You have a typo somewhere. Please paste code next time rather than use images.

          Best,

  • Low Rider

    @nicraboy:disqus

    Hello Nic, I am new in your website and I am loving it!

    Nic, I trying to find an example with two pages of data.

    Like a TODO list but with a second screen where I can insert a second item for the first one.

    Do you have any example in your site?

    Thank you and great work!

    • I wrote this as a guest post:

      http://x-team.com/2016/09/create-multi-page-applications-native-features-using-ionic-2/

      Does it accomplish what you want?

      • Low Rider

        Thank you for you answer Nic.

        You have a nice tutorial how to work with local storage but my doubt is different.

        It is more something like: How can I create the first list and click in one item in the list, go to a different page with information about that item and from there insert a new item and create a second list for that item. And if I have two items in the first list I would like to create items for them with separate lists by ID.

        So, when I clicked in one item from the first list I can see the sub-item for it.

        Is more how can I work with the ID between pages and use those ID to create their list (subitem).

        Thank you again.

  • rickie94

    where is the GitHub link and will it work on new ionic