Creating a Task Manager App Using Ionic: Part 1

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.

1	npm install -g cordova ionic

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

1	ionic start angular-ionic blank

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.

1	ionic serve

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

Here is how the project structure looks:

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:

1	IonicModule.forRoot(MyApp)

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:

<ion-header>
    <ion-navbar>
        <ion-title>Ionic Task List</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
        <ion-item>
            <ion-label>Task 1 </ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label>Task 2</ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label>Task 3 </ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>
    </ion-list>
</ion-content>

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:

import { Component } from '@angular/core';

@Component({
  selector: 'page-list',
  templateUrl: 'list.component.html'
})
export class ListPage {

  constructor() {

  }

}

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:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ListPage } from '../pages/list/list.component';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

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.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list.component';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = ListPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}


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:

1	ionic serve

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

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.

1	<ion-fab top right>
2	<button ion-fab mini><ion-icon name="add"></ion-icon></button>
3	</ion-fab>

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

<ion-header>
    <ion-navbar>
        <ion-title text-center>Ionic Task Manager</ion-title>
    </ion-navbar>

</ion-header>

<ion-content padding>
    <ion-fab top right>
        <button ion-fab mini><ion-icon name="add"></ion-icon></button>
    </ion-fab>

    <ion-list>

        <ion-item>
            <ion-label>Task 1 </ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>

        <ion-item>
            <ion-label>Task 2</ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>

        <ion-item>
            <ion-label>Task 3 </ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>

    </ion-list>

</ion-content>

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

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:

<ion-header>
    <ion-navbar>
        <ion-title text-center>Ionic Task Manager</ion-title>
    </ion-navbar>

</ion-header>

<ion-content padding>
    <ion-fab top right>
        <button ion-fab mini> <ion-icon name="arrow-back"></ion-icon></button>
    </ion-fab>

    <ion-list>
        <ion-item>
            <ion-label color="primary" floating>Enter task </ion-label>
            <ion-input></ion-input>
        </ion-item>
    </ion-list>

    <button ion-button round>Add</button>

</ion-content>

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:

import { Component } from '@angular/core';

@Component({
  selector: 'page-add',
  templateUrl: 'add.component.html'
})
export class AddPage {

  constructor() {

  }

}

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:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ListPage } from '../pages/list/list.component';
import { AddPage } from '../pages/add/add.component';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    AddPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    AddPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

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

1	import { ModalController } from 'ionic-angular';

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

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { AddPage } from '../add/add.component';

@Component({
  selector: 'page-list',
  templateUrl: 'list.component.html'
})
export class ListPage {

  constructor(public modalCtrl: ModalController) {}

  presentAddModal() {
    let addModal = this.modalCtrl.create(AddPage);
    addModal.present();
  }

}

1	<button ion-fab mini (click)="presentAddModal()"><ion-icon name="add"></ion-icon></button>

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.

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.

1	<button ion-fab mini (click)="dismiss()"> <ion-icon name="arrow-back"></ion-icon></button>

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

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-add',
  templateUrl: 'add.component.html'
})
export class AddPage {

  constructor(public viewCtrl: ViewController) {

  }

  dismiss(){
      this.viewCtrl.dismiss();
  }

}

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.