Ionic 2: Using Cordova Plugins

Question

I did a lot of googling and couldn't seem to come up with much of an answer, how does the syntax of calling Cordova plugins in Ionic 2 work.

Like for example, in Ionic 1: I was using a facebook plugin, and I would call it like: $cordovaFacebook.login(["public_profile", "email","name","last_name","first_name","birthday","age_range","link"]).then(function (success) {

I would also 'inject' it and add it as a dependency. Both things I am not sure how to do with Ionic 2.

I read somewhere that with Ionic 2 that isn't as nesscary, but I am still unsure

Answer 1

Steps to use cordova plugin:

1. Add plugin

   cordova plugin add [name of plugin]

Actually this is the only step to use cordova plugin. But there could be an error message when you're using Typescript. For example:

ERROR in [default] /Users/myname/Projects/ionic2/demo/app/pages/home/home.ts:21:12 Property 'device' does not exist on type 'Navigator'.

2. To fix the error message for Typescript. You can simple add this line to your .ts file, for example:

   declare var navigator : any;

Answer 2

If you want something similar to ngCordova. Then there is also similar project for Ionic 2 called as ionic-native. Check this link http://ionicframework.com/docs/v2/native/

So for example, you want to use Camera in a Ionic Page. You would have to first import the plugin, something like this:

import {Camera} from 'ionic-native';

and After that, inside the Page class you can do the thing like this:

Camera.getPicture(options).then((imageData) => {
   let base64Image = "data:image/jpeg;base64," + imageData;
  }, (err) => {
});

Also remember that you have to first install plugin via

ionic plugin add cordova-plugin-camera 

I hope it will answer you question.

Answer 3

Ionic 2 still has a lot of issues that have to be worked out for full app development in Typescript. There are several cordova plugins that are not "ionic-native" plugins for instance the cordova Paypal plugin which you could import and inject into your angular 1 / ionic 1 application without a problem, but will not be available to you via the "navigator" or just the class name in an Ionic 2 Typescript app.

Hopefully this will be addressed soon so that you can import these "other plugins" into your app just like a regular module so that it will be available in your typescript code editor, i.e. VS Code so you can visually debug.