Ionic 3 With angular 4+

Ionic 3 Creating OAuth redirect URL for Facebook Steps for creating OAuth Redirect URL for Facebook Go To OAuth Portal . Login To OAuth / Register and login to OAuth After Logining In You Need To Enter Tenant-name ("Any Name Which suits you application here iam using temp-app") Select Region and click on NEXT button Select Account Type either COMPANY / PERSONAL(HERE iam selecting personal) Select A role either DEVELOPER / NON-DEVELOPER. Select one of the option in type of project dropdown and click on create. A Dashboard is appeared. Click on connections in sidemenu and select social. You can see all Social media applications , select one and make the toggle active. Here we are selecting Facebook. A model will be opened. We need to enter APP-ID and APP-SECRET which we got from Facebook developers dashboard Scroll down and click on SAVE button Then in the same model goto client Tab on the top of the model Make Default App to active by changing toggle to a...

Ionic 3 Linking Fire-base and Facebook App   Steps for Linking Fire-base and Facebook Go to Fire-base Console Login with your google account Click on Add Project . Enter project name and click continue , Firebase dashboard will be opened Click on ATHENTICATION in side-menu In ATHENTICATION Page select "SIGN-IN-METHOD" tab. Click on facebook option and enable the facebook authentication. Enter APP ID and APP SECRET which we can got from Facebook developers Portal at step 5 Click on save

Ionic 3 Creating App Id and App secret for Facebook Steps for Creating APP-ID and APP-SECRET : Go To Facebook Developers Page Login to developers Portal Using Your Facebook Credentials Click On Add a New App Button Enter Your App Name and click continue You will see facebook developers Dashboard , where you can see APP ID and APP SECRET Click on setting in the side menu , click on Basic and click on the "ADD PLATFORM" button at bottom of page Now You can see Google Play Package Name Field Where you need to enter your application Package Name sufix with "com." Package name will be "com.io.ionic.starter" (io.ionic.starter can be found in config.xml file) You can also see Class Name Field Where you need to enter your application Package Name sufix with "com." and prefix with "MainActivity" Class name will be "com.io.ionic.starter.MainActivity" (io.ionic.starter can be found in config.xml file) Click On Save Cha...

Ionic 3 Login With Facebook Using Native Facebook Plugin Used Plugins: Facebook Plugin: ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME" npm install --save @ionic-native/facebook Firebase Installation: npm install --save firebase Create Your Project: ionic start nativeFacebookApp Change Directory To Your Ionic Project: cd nativeFacebookApp Add Page To Your Application :  ionic g page nativeFacebook Add the following in app,module.ts  import { NativeFacebook Page } from '../pages/native-facebook/ native-facebook '; declarations:[ ..... NativeFacebookPage ], entryComponents : [ .... NativeFacebookPage ] Add the following code in native-facebook.html <ion-header> <ion-navbar color="primary"> <ion-title>Native Facebook</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div *ngIf=...

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...