Ionic Firebase Push Notification

This lesson, we’re going to learn how to integrate firebase cloud messaging (FCM) with your ionic project. For a push notification setup we’re going to use a plugin https://github.com/arnesson/cordova-plugin-firebase Create new ionic project or your can choose your existing project ionic start ionPush blank cd ionPush Before adding platform and plugin, we need to download google-services.json from your …

Ionic Multi Language Support (i18n)

ionic multi language support example using ng-translate (https://github.com/ngx-translate) allows you to create ionic projects with multiple language support. Steps: Create New Ionic Project Install Required dependencies Create .json files for different language (here I’m going to use English & Tamil) Declaring inside app.module.ts Working with home.html & home.ts Create New Project Here, I’m going to create …

Ionic Action Sheet

This Article I’m going to explain, How to create ActionSheet using Ionic Framework. Goal: Create a button When user pressed button, open action sheet with 2 option Option 1: Access Camera Option 2: Access Gallery Display Output in console STEPS Create New Ionic 2 Project ionic start ActionSheet blank Create a button with click functionality …

Date Picker Example using Ionic

This article, I’m going to create Ionic date picker example using typescript. Our Goal: Display Current Date time inside <ion-datetime></ion-datetime> Tag Open DatePicker for choose other date & change date STEPS Create new ionic blank project ionic start DatePicker blank create DateTime tag src/home.html with two-way(ngModel) binding <ion-content padding> <ion-datetime displayFormat=”DD-MM-YYYY HH:mm” [(ngModel)]=”today”></ion-datetime> </ion-content> Define today …

Multiple image picker using Ionic

In this article, we’ll learn how to use multiple image picker using ionic. We are going to use https://github.com/wymsee/cordova-imagePicker / https://github.com/Telerik-Verified-Plugins/ImagePicker for picking up images from your android & ios photo gallery. It contains following steps Step 1: Create new ionic project & Change your working directory ionic start imagePicker blank cd imagePicker Step 2: Add required …

Ionic AccountKit Integration

Ionic AccountKit Integration: This article, we’re going to learn “How to authenticate user using SMS / Phone Number by Facebook AccountKit” Requirements: Facebook Developer Account Ionic Setup Create Client Token on Developer’s Account Login with https://developers.facebook.com Working with Ionic Project Create new project ionic start accountkit blank Adding Platform ionic cordova platform add android ionic …

Accessing user location using Ionic Geolocation

Ionic Geolocation: In this tutorial, I’m going to teach you, “How to access user’s location by using Ionic Native (cordova-plugin-geolocation)” & Display locations on UI Technology used: Ionic 3 Ionic Native Geolocation (cordova-plugin-geolocation) Step 1: Create New Ionic project ionic start GeoDemo blank Step 2: Add plugin ionic cordova plugin add cordova-plugin-geolocation –variable GEOLOCATION_USAGE_DESCRIPTION=”To locate you” …

Ionic PHP MySQL Example

This lesson, we’re going to learn how to read/write data from PHP & MySQL. Project: Need to create simple product manager, where user can enter product information such as title, description, price and picture URL & he can also read data from database Requirement: we need to create JSON based Web service with PHP & …

Ionic Google Maps Integration

This lesson we’re going to learn how to work with Google Maps. Create new project ionic start GMap blank cd GMap ionic serve Add plugin ionic plugin add cordova-plugin-googlemaps –variable API_KEY_FOR_ANDROID=”YOUR_ANDROID_API_KEY_IS_HERE” –variable API_KEY_FOR_IOS=”YOUR_IOS_API_KEY_IS_HERE” Please check Create API key for android and ios for creating API key home.html <ion-header> <ion-navbar> <ion-title> Home </ion-title> </ion-navbar> </ion-header> <ion-content padding> …

Ionic login with Google Plus

(Ionic login with google plus) explains about implementing google plus login using cordova-plugin-google-plus plugin with ionic native. Login with Google Plus Video Lesson Create Client Reversed Client Id: https://codesundar.com/tutorials/create-reverse-client-id-for-google-login/ Create New project & Change working directory ionic start gplogin blank cd gplogin Add your platform ionic cordova platform add android npm install –save @ionic-native/googleplus Change …