build a simple ToDo app with ionic 3

To learn some thing you need to practice it, and what better than building a simple project and adding on features while you advance in your studies.

So we will be building a simple ToDo app using Ionic Framework, we will build from a blank template -from scratch- and will go from there, this was based on my understanding of Josh Morony’s Tutorial,  you can follow his blogpost here : Build a Todo App from Scratch with Ionic 2 & 3 so there will be similarities.

first we will generate our project go to your terminal and type

this command will generate an ionic application with a blank template, if you go to your app folder and type

this page will show up on your browser

now lets start, open your project in the text editor you use, now all the components we need to work with are located in the .src folder the structure is clear all the application pages will be located in the .pages folder, in this folder we will find the HomePage component generated for us

Creating The Template

we will modify home.html file to view a list of todos, open src/pages/home/home.html


so basically we are creating a page that have a navigation bar with an add button <ion-buttons end>  notice that end here is to position the button at the right of the navigation bar,

(click)=”addItem()” is a listener for the click event that will call the addItem function ,now in the content area we are creating a list to hold our todo’s

notice this part

here we are embedding a template for each item of our todo list, the *ngFor will loop over the Items of the array and render them inside <ion-item> , so if we have 6 items in the array then the <ion-item> will be rendered 6 times, we will define our Items array later on don’t rush it up, just know that her we are assigning a single element from our array to the item  variable as we loop so we will be able to reference each item properties

Adding the Class Definition,

know to be able to use the function we added in our template we should create them in the HomePage class so lets go to home.ts and modify it

now as you can see we have created an array of Items which will hold our Todo items when we add them, you can see that we have created an addItem function which is doing nothing right now.

so now we will create a component or lets say its page for now to allow us to add a title and a description to our todo

to do so run this command in your terminal

this will create a add-item folder in your pages folder, now before jumping to the new page first we need to import the new created page to app.modules.ts file you should add it in the declaration array and the entryComponants array , the file should look like this

now lets work on the AddItem page template, its so simple we just need 2 input fields and a button, edit your add-item.html to look like this

so as you can see we have set the title of the page to be Add Item, we have a closing button that will close this page when clicked, we have two inputes to where we will add the title and the description for our todo and a save button to save our data, the [(ngModel)] will help us track our data changes, any thing we change in the title field for example will be reflected directly to the this.title which we will create in the add-item.ts page and viseversa

now lets go and edit our add-item.ts

now we will be using the addItem page as a modal ,so whats a modal: A Modal is a content pane that goes over the user’s current page its usually used for adding and editing .to be able to use it we have to import ViewController service to allow us to dismiss the modal

now we only have to functions a save function and a close function, the close function will dismiss the modal (the add page) without holding any entered data

the saveItem function, basically it will pass on the values of title and about to the home page through the dismiss function , we will be setting a listener on the homepage to grab them the if statements are to make sure that the user will add a valid data before saving (if you don’t add the if you will end up creating empty items)

back to our home page modify your home.html

notice we have imported the add-item page plus the modal controller

you cam see that in addItem function here we are firing the addItemPage as a modal and when dismissing it we are grabbing the data (title, about) and inserting them in item which then will be saved in the Items array

run

and enjoy your simple todo app

next post will about saving the data , and adding the edit and delete feature

if you find any problems going through this, or you have any thing you would like to add please  leave a comment

 

Filed under: Learning, ProgrammingTagged with: , ,

No comment yet, add your voice below!


Add a Comment

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

Comment *

Name *
Email *
Website