1. Code
  2. Ionic

Creating a Task Manager App Using Ionic: Part 2

Read Time:7 minsLanguages:

In the first part of the tutorial series, you created the user interface and navigation for the task manager app. In this tutorial, you'll see how to implement the functionality for the Ionic task manager app to add and list tasks.

Getting Started

Let's get started by cloning the source code from the first part of the tutorial series.

Navigate to the project directory and install the required dependencies.

Run your app from the project directory.

You should have the application running at http://localhost:8100/.

Communicating Between Components

You have already created the Add component and List component to add tasks and to list tasks respectively. In order to make them work in sync, you need to maintain communication between the two components. To communicate between the components, you'll make use of an injectable CommonService.  

Create a folder called service in the src/pages folder.

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

You'll keep track of the tasks list in the common service, and it will be shared between the Add and List components.

Define a variable called tasks in the common.service.ts file. You'll keep your task list in this tasks array.

Create a folder called task inside the src/pages folder. Create a file called task.model.ts and add the following code:

You'll use the above Task class to create an instance of a new task.

When the user clicks on the Add task button from the Add component, you'll add items to the tasks variable in the common.service.ts file. So create a method called addTask in the common.service.ts file, which you'll call from the Add component.

Add a Task to the List

In order to add a task to the task list, you need to import the common.service.ts file inside the AddPage component.

Initialize the CommonService inside the AddPage component constructor method.

Inside the AddPage component, create a method called add where you'll add the task to the common service tasks list.

Here is how the add method in the AddPage component looks:

As seen in the above method, you have called the addTask method from the common service to add a task to the tasks list.

Once the item is added, you have called the dismiss method to dismiss the pop-up overlay. Here is how the add.component.ts file looks:

In the add.component.html page, add the ngModel directive to the input element.

Add the click event to the button in the add.component.html to trigger the add method inside the add.component.ts.

Save the above changes and try to restart the ionic server. Navigate the browser URL to http://localhost:8100, and you should be able to view the mobile app in the browser.

Click on the Add icon to add a task. Enter the task name and click the add button. The pop-up should disappear.

Listing Task List Items

Once the task gets added in the tasks list, you need to update the view accordingly. So, to track the task when added to the list, you'll need to use Angular Subject.

Define a subject called task_subject inside the common.service.ts file.

When the task gets added to the tasks list, you need to trigger the subject task_subject to inform the subscriber that a task has been added.

Modify the addTask method inside the common.service.ts file to include the following code:

Here is the modified addTask method:

Subscribe to the subject task_subject inside the list.component.ts file.

Whenever a new task is added the tasks from the commonService is assigned to the tasks in list.component.html and the view is updated.

Here is how the list.component.ts code looks:

Modify the list.component.html to iterate over the tasks variable from the list.component.ts file. Here is how it looks: 

Save the above changes and restart the server. Try to add a new task and it will get displayed on the listing screen.

Ionic Task ManagerIonic Task ManagerIonic Task Manager

Now let's implement the functionality to mark the finished tasks. Each time a new task is added, you are adding an IsDone attribute as false.

Let's keep two different arrays for pending tasks and finished tasks.

Each time a new task is added, you'll update the above two arrays as shown:

When the user clicks on the check box, you need to toggle the IsDone status. Add a method called checkPendingItem to toggle the IsDone status for pending tasks.

Similarly, add another method called checkDoneItem to toggle the task status for done items. Here is how the method looks:

Once the IsDone status is toggled, you need to update the tasks. Define a method called updateTask, which is called after IsDone toggle in both of the above methods.

Modify the list.component.html code to display the pendingTasks and doneTasks separately. Here is how the modified list.component.html file looks:

Save the above changes and restart the ionic server. You should have the application running at http://localhost:8100.

Ionic Task Manager App ListingIonic Task Manager App ListingIonic Task Manager App Listing

Wrapping It Up 

In this tutorial, you saw how to implement the functionality to add and list the tasks in the Ionic task manager mobile app. You saw how to use an Angular service to share data between two components. In this tutorial, you used the Angular service to keep data in a common list when added from the Add component and display it in the List component.

Do let us know your thoughts in the comments below.

Source code from this tutorial is available on GitHub.

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