1. Code
  2. Angular

Creating a Task Manager App Using Ionic: Part 1

Read Time:7 minsLanguages:

In this tutorial series, you'll learn how to get started with creating a mobile app using the Ionic framework. Ionic uses Angular for writing the components and creating the mobile app. 

Throughout the course of this series, you'll be creating a simple task manager mobile app using the Ionic framework.

From the official documentation:

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease. 

Getting Started

Let's get started by installing Ionic using Node Package Manager (npm). Before installing Ionic, make sure you have Node.js installed on your system.

Once Ionic has been installed, create a new Ionic blank project using the following command:

You'll be testing the Ionic app in the browser until it's complete. Once complete, you'll test the application on an Android device.

Type in the following command to run the app from the browser.

Point your browser to http://localhost:8100/ and you should have the Ionic project running.

IONIC Blank Template ProjectIONIC Blank Template ProjectIONIC Blank Template Project

Here is how the project structure looks:

IONIC Project StructureIONIC Project StructureIONIC Project Structure

Inside the Ionic project, you have a folder called src/app. Inside the app folder, you will find a file called app.module.ts where the root module AppModule is defined.

In the app.module.ts file inside the imports section, you can see that the root component has been defined using the following code:

MyApp has been imported from the app.component where it has set the rootPage as HomePage, which shows up when the app loads.

Creating a List Task Component

Let's create the view for listing the added tasks. Inside the src/pages folder, create another folder for the list component called list.

Inside the list folder, create a file called list.component.html which would be the component template. Add the following code to the list.component.html file:

As seen in the code above, you have used Ionic-specific tags for creating the elements. You can refer to the Ionic official documentation to get a list of Ionic component APIs which you can use while creating your templates.

To control the above created template, you'll need a controller class. Create a file called list.component.ts and define the ListPage class. Here is how it looks:

You have defined the task listing component using the @Component decorator. Inside the @Component decorator, you have defined the selector using the selector key and the template using the templateUrl key for the component.

The application needs to know that the above created component exists, and hence you need to import it inside the root module.

Import the ListPage class inside the src/app/app.module.ts file and include it in the declarations and entryComponents list. Here is how the modified app.module.ts file looks:

When the application loads up, you want the newly created List component to show up instead of the HomePage. So modify the rootPage defined inside the app.component.ts file. 

As seen in the above code, you imported the ListPage inside the app.component.ts file and changed the rootPage to ListPage instead of HomePage.

Save the above changes and start the Ionic server using the following command:

You should have the mobile app running at http://localhost:8100/

Ionic App With List ComponentIonic App With List ComponentIonic App With List Component

Creating the Add Task Component

From the listing screen, you'll add a link to add items to the list. Let's place an add icon on the right side of the screen. Inside the list.component.html file, add the following to add the plus icon.

Here is how the modified list.component.html file looks:

Save the above changes and restart the server, and you will have the plus icon displayed on the screen.

Task Manager List With Add IconTask Manager List With Add IconTask Manager List With Add Icon

When the user clicks on the plus icon, you need to show the screen to add new tasks. So let's create another component called the Add component.

Create a folder called add inside the pages folder. Inside the add folder, create a file called add.component.html and add the following code:

The above code displays the screen to add a new task.

You need to display the above screen when the user clicks the plus icon on the list screen. So you'll be showing it as a modal popup.

Create a file called add.component.ts and add the following code:

As seen in the above code, you just created the Add component by specifying the selector and templateUrl.

Register the component by importing it in the app.module.ts file inside the src/app folder. Here is how the modified app.module.ts file looks:

To show the AddPage component in a modal popup, you need to import ModalController provided by ionic-angular. Import ModalController in list.component.ts.

Create a method called presentAddModal and create a modal using the imported ModalController. Here is how the list.component.ts file looks:

Register the click event on the add button in list.component.html

Save the above changes and restart the Ionic server. Click on the add icon in the list page and you will have the add task page.

Task Manager App - Add TaskTask Manager App - Add TaskTask Manager App - Add Task

For the back button on the add task screen, you need to add a dismiss method on the button click in the add.component.ts file.

Import the ViewController module and call the dismiss method to go back to the listing screen. Here is how it looks:

Wrapping It Up

In this tutorial, you saw how to get started with creating a mobile app using the Ionic framework, which uses Angular. You created the view for a task manager app. You created the Add component and List component. 

In the next part of this tutorial series, you'll implement the functionality for the task manager app to add and list tasks.

Source code from this tutorial is available on GitHub.

Do let us know your suggestions in the comments below.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.