Native plugin wrappers for Cordova and Ionic with TypeScript, ES6+, Promise and Observable support
npm install ionic-native  
npm install @ionic-native/core --save
`
You also need to install the Ionic Native package for each plugin you want to add. Please see the Ionic Native documentation for complete instructions on how to add and use the plugins.
Documentation
For the full Ionic Native documentation, please visit http://ionicframework.com/docs/native/.
$3
To use a plugin, import and add the plugin provider to your @NgModule, and then inject it where you wish to use it.
`typescript
// app.module.ts
import { Camera } from '@ionic-native/camera';
...
@NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
`
`typescript
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';
import { NgZone } from '@angular/core';
@Component({ ... })
export class MyComponent {
constructor(private geolocation: Geolocation, private platform: Platform, private ngZone: NgZone) {
platform.ready().then(() => {
// get position
geolocation.getCurrentPosition().then(pos => {
console.log(lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude})
});
// watch position
const watch = geolocation.watchPosition().subscribe(pos => {
console.log(lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude})
// Currently, observables from Ionic Native plugins
// need to run inside of zone to trigger change detection
ngZone.run(() => {
this.position = pos;
})
});
// to stop watching
watch.unsubscribe();
});
}
}
`
$3
Ionic Native 3.x makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in ionic serve.
To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the Camera plugin to return a stock image while in development:
First import the Camera class in your src/app/app.module.ts file:
`ts
import { Camera } from '@ionic-native/camera';
`
Then create a new class that extends the Camera class with a mock implementation:
`ts
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve("BASE_64_ENCODED_DATA_GOES_HERE");
})
}
}
`
Finally, override the previous Camera class in your providers for this module:
`ts
providers: [
{ provide: Camera, useClass: CameraMock }
]
`
Here's the full example:
`ts
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Camera } from '@ionic-native/camera';
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve("BASE_64_ENCODED_DATA_GOES_HERE");
})
}
}
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler},
{ provide: Camera, useClass: CameraMock }
]
})
export class AppModule {}
``