March 20, 2017

Ionic 2 Native Overview

Ionic 2 Native Overview– Ionic native is organised set of ES5/ES6/Typescript wrapper for Cordova/Phonegap Plugins that enables us to add/access the native functionality. It is very easy to access the native features in Ionic 2. Here in this tutorial we are going to give overview on Ionic 2 native features.

Ionic 2 Native Overview Example

Let us go through the steps to install, access native features in Ionic 2.

Installation

Ionic native is included everywhere by default in Ionic 2 so you don’t need to install ionic native in Ionic 2. If you are using Lower version of Ionic, you can install ionic native simply as –

Ionic Native Installation Example:

npm install ionic-native --save

Promises and Observables

Ionic Native wraps plugin callbacks in a promise or observable which provides a common interface for all plugins and it ensures the native events trigger change detection in Angular 2.

Ionic 2 Native Example

In the below example we have imported the Geolocation plugin from ionic-native package. Using this plugin you can access the current gelocation of device.

Ionic 2 Native Example:

import {Geolocation} from 'ionic-native';

Geolocation.getCurrentPosition().then(pos => {
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

let watch = Geolocation.watchPosition().subscribe(pos => {
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

// to stop watching 
watch.unsubscribe();

Ionic 2 Native Overview