Ionic 3 With angular 4+

Ionic 3 Launch Navigator Used Plugins ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator npm install --save @ionic-native/launch-navigator Create Your Project ionic start projectName blank Change Directory To Your Ionic Project: cd screenshotProject Create a Page  ionic g page locationLauncher Add following lines in app.module.js import { LocationLauncherPage } from '../pages/location-launcher/location-launcher'; declarations:[ ..... LocationLauncherPage ], entryComponents : [ .... LocationLauncherPage ] Add The following to location-launcher.html <ion-header> <ion-navbar color="primary"> <ion-title>Launch Navigator</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>Source</ion-label> <ion-input type="text" [value]="sourcePoint" [(ngModel)]="sour...

Ionic 3 Screenshot using Button and Shake Gesture Used Plugins: Screenshot Plugin: ionic cordova plugin add com.darktalker.cordova.screenshot npm install --save @ionic-native/screenshot Shake Plugin: ionic cordova plugin add cordova-plugin-shake npm install --save @ionic-native/shake Vibration Plugin : ionic cordova plugin add cordova-plugin-vibration npm install --save @ionic-native/vibration Create Your Project: ionic start screenshotProject Change Directory To Your Ionic Project: cd screenshotProject Add Page To Your Application :  ionic g page screenshot Add the following in app,module.ts  import { ScreenshotPage } from '../pages/screenshot/screenshot'; declarations:[ ..... ScreenshotPage ], entryComponents : [ .... ScreenshotPage ] Add the following code in screenshot.html <ion-header> <ion-navbar color="primary"> <ion-title>Screenshot Ionic</ion-title> </ion-navbar> </ion-header> ...

Ionic 3 Image Picker & Image Resize Used Plugins : Image Picker Plugins: ionic cordova plugin add cordova-plugin-telerik-imagepicker npm install --save @ionic-native/image-picker Image Resizer plugin : ionic cordova plugin add add info.protonet.imageresizer npm install --save @ionic-native/image-resizer Create Your Project as:  ionic start ProjectName blank cd ProjectName Create Pages In your Project as : ionic g page image-picker Include new Page in app.module.ts as : import { ImagePickerPage } from '../pages/image-picker/image-picker'; declarations:[ ..... ImagePickerPage, ], entryComponents:[ ...... ImagePickerPage, ] Use the below code in any of page example : image-picker.html <ion-header> <ion-navbar color="primary"> <ion-title>Image Picker</ion-title> </ion-navbar> </ion-header> <ion-content [ngStyle]="{ 'background': 'url(' + pickedImage + ') center/c...

Ionic 3 Java-script API Google Maps  Used Google Maps API :  API Used : Java script API. Include the following script tag in index.html of Ionic project <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> Create a page for in ionic as follow Use : ionic g page googleMaps Copy the following html code into  GoogleMapsPage .html <ion-header> <ion-navbar color="primary"> <ion-title>Google Maps</ion-title> </ion-navbar> </ion-header> <ion-content> <div #map style="height:100%;"></div> </ion-content> Create a provider by using following command ionic g provider mapService Copy the following code into your mapService.ts import { Injectable } from '@angular/core'; declare const google; @Injectable() export class MapServiceProvider { map: any; masterArray = [ [ { lat: 17.439930, ...

Ionic 3 Native Google Maps Application Development Used Plugins : Install the below Plugins In your Ionic Application ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" npm install --save @ionic-native/google-maps Creating a page :  ionic g page livedata (or) ionic generate page livedata Import the following code in your application src/app/app.module.ts import { LivedataPage } from './../pages/livedata/livedata'; import { GoogleMaps } from '@ionic-native/google-maps'; Add the following data in @ngModule of app.module.ts as follows : @NgModule({ declarations: [ ...... LivedataPage .... ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, LivedataPage ], providers: [ GoogleMaps ] }) Now add the following Code in your livedata.html file : <ion-header color="p...