Alternatively, you could log into your Firebase account and see your data listed.

You might have noticed that we did not modify theaddItemfunction for this to work. Since our tasks variable is aFirebaseListObservableto ourFirebasedatabase, adding new items is still done via thepushmethod.

However, both themarkAsDoneandremoveTaskmethods will need some refactoring in order to properly interact with Firebase. Instead of directly interacting with the specific array item, we must use the AngularFire methods to do this.

In themarkAsDonefunction, replace:

task.status = "done";

with:

this.tasks.update(task.$key, { status: 'done' });

Thetask.$keyis the unique key value that is generated by Firebase when it was added to the database.

In theremoveTaskfunction, replace:

task.status = "removed";
let index = this.tasks.indexOf(task);
if (index 
>
 -1) {
  this.tasks.splice(index, 1);
}

with:

this.tasks.remove(task.$key);

Save our file, and run our application again using$ ionic serve. Our sliding buttons will now properly update our Firebase dataset.

You might have noticed that thetask.$keyreferences are being flagged with the following warning:Property '$key' does not exist on type 'Task' any. This is a simple fix. Open the_task.ts_file, add a new property$key, and set its type toany.

With that, we have transformed our local to-do application to one that uses a cloud-based one with very few lines of code.We have just barely touched on the power of Firebase and AngularFire2.It would be worth your time to explore the capabilities of these libraries further.

Using Ionic Native

Let’s see how our app looks in an emulator.From the command line, either use$ ionic cordova emulate iosor$ ionic cordova emulate android.

EMULATING ANDROID

In case you forgot, launching the default Android emulator can be extremely slow. I recommend usingGenymotion as a substitute for any virtual device testing.

EMULATING IOS

When you run justionic cordova emulate ios, you might want to target a specific device type and OS. To do this, simply append the command with--target="devicename,OSType". For example, if I wanted to target an iPhone 5s running iOS 10, the command would beionic cordova emulate ios--target="iPhone-5s, 10.0".

Our app should connect with ourFireBasedatabase and display our task list. Now, let’s add a new task by tapping the Add Item button (Figure 7-8).

Figure 7-8.JavaScript dialog within our Ionic application

Notice the dialog: it is the same JavaScript dialog that we have been seeing in our browser. Now if we want a native-looking app, we certainly need to address this before releasing it to the app stores.

One of the many plug-ins that exist for Cordova uses native dialogs in place of the JavaScript version. To support using Cordova plug-ins with the Ionic framework, they create a curated set of wrappers for many of the most common plug-ins.

By default, Ionic Native is included, but if you need to manually include Ionic Native into our project, use this command:

$ npm install @ionic-native/core --save

With Ionic Native installed we will have the interfaces needed to interact with our Cordova plug-ins.

WHAT ABOUT NGCORDOVA?

The ngCordova library (also maintained by the team behind Ionic) was designed for use with Angular 1 and Ionic 1 projects. Ionic Native is the replacement solution for Angular 2 and Ionic 2 projects.

The next step we need to perform is to install the actual plug-in. One of the available plug-ins for Cordova is the Dialogs plug-in. This plug-in will render native dialogs in our app, instead of the web-based options. From the terminal, we can install it via Ionic CLI:

$ ionic cordova plugin add cordova-plugin-dialogs

This will download the plug-in code for all our installed platforms and update the_config.xml_so our app will now be built with this code reference included.

PLUG-IN SOURCES

In the past, the plug-ins were referenced via theorg.apache.cordova.*naming system. When the plug-in host was moved to npm, the naming system changed to thecordova-plug-*pattern. You might find references to the older system in some documentation, so you will want to replace that reference with the proper npm version of the plug-in.

Starting with Ionic Native 3.x, one more step is now required into order to use the plug-in in our application. With Ionic Native 2.X, the entire Ionic Native library was loaded into your application (just the interfaces, not the actual plug-ins). Now, each plug-in can be selectively added to your application, thus making your application smaller and hopefully a tiny bit faster to start. To install the library for the Ionic Native Dialog, use this command:

$ npm install --save @ionic-native/dialogs

This change in how the plug-in interfaces are used does mean we will need to import and add each plug-in provider to our@NgModule’s provider list.

In the_app.module.ts_file, we need to import and add each plug-in provider to our@NgModuledeclaration. Here is the full@NgModuledeclaration with our three plug-ins listed in the providers array:

@NgModule({
  declarations: [
    MyApp,
    TaskListPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TaskListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Dialogs,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})

In thetasklist.ts, we will need to import theDialogsmodule. With the other import statements, add the following:

import { Dialogs } from '@ionic-native/dialogs';

and in our constructor, we will need to pass in the reference to theDialogsmodule:

constructor(public navCtrl: NavController, public af: AngularFire, 
public dialogs: Dialogs) {

Then we need to replace these lines of code with:

this.dialogs.prompt('Add a task', 'Ionic2Do', ['Ok', 'Cancel'], '').then(
  theResult =
>
 {
    if ((theResult.buttonIndex == 1) 
&
&
 (theResult.input1 !== '')) {
      this.tasks.push({ title: theResult.input1, status: 'open' });
    }
  }
)

INDEX VALUES

You might be wondering why we are comparing to an index value of 1, since typically arrays start counting from 0. The zero value is used to indicate the dismissal of the dialog by not using any of the user-defined buttons.

If we want to error-proof our code a bit, we could check that the inputted string was not empty before we added it our list.Figure 7-9shows what the application’s Add Item dialog now looks like.

Figure 7-9.Add Item dialog using the Cordova dialog plug-in

And with that, a basic to-do application was built. We looked at some basic Ionic components and theming, worked with an external library, and incorporated the Ionic Native library.In the next chapter, we will explore more Ionic components and navigation methods.

Summary

With this application, we have explored the basic structure of an Ionic project. You learned how to add elements to a header component, work with lists, enable the swipe to reveal function, and use the Ionicon library. We added Firebase support to save our data in the cloud, as well as an Ionic Native component for the user dialogs to make our application look native.