Steps For Installing Cordova Native Plugin In Ionic

Cordova wraps native Code (for android, ios or browser) into a Javascript interface which acts as a bridge to our code. Through this bridge we can create plugins which gives us access to native functionalities like camera from our Javascript code without every seeing our touching the native languages (unless we need to write our own Cordova plugins).

Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy. Ionic access the native functionality of the platforms through cordova plugins and in order to access cordova plugin ionic has provide a list of the wrappers which are maintained by ionic team, list of all these packages can be found here https://ionicframework.com/docs/enterprise.

In order to access cordova native plugin functionality in ionic-4 angular some basic steps for each plugin is needed, for this example we will install cordova geolocation plugin to check user location from time to time, for details about the functionality provided by the plugin you can check the plugin on github, Follow the steps below for installing the plugin in ionic for angular :

1) install plugin for cordova through which cordova access the native functionality

ionic cordova plugin add cordova-plugin-geolocation

2) install wrapper plugin for ionic

npm install @ionic-native/geolocation

3) import the ionic wrapper into your main module i.e app.module.ts

import { Geolocation } from '@ionic-native/geolocation/ngx';

4) add the imported service to the providers array of the module

providers: [ Geolocation ]

5) now to use this functionality in a component import the service and use the functionality above

construct(private geolocation: Geolocation) {}
                 ngOnInit() {
                                 this.geolocation.watchPosition().subscribe((data) => {
                                                 console.log(data.coords.latitude + '-' + data.coords.longitude);
                                 });
                 }