Firebase Google Authentication using ionic

This article, we’ll learn how to implement firebase google authentication using Ionic. Before we starting we need to create google reverse client id for adding plugin. please refer https://codesundar.com/tutorials/create-reverse-client-id-for-google-login/ for detailed instructions Let’s create new project & Add required dependencies ionic start firebasegoogleauth blank cd firebasegoogleauth ionic cordova platform add android ionic cordova platform add ios ionic …

Firebase Facebook Authentication using Ionic

This article, we’ll learn how to implement firebase facebook authentication using Ionic. Before we starting we need to create facebook app id, app name for adding plugin. please refer https://codesundar.com/create-facebook-application/ for detailed instructions Let’s create new project & Add required dependencies ionic start firebasefbauth blank cd firebasefbauth ionic cordova platform add android ionic cordova platform add ios …

Ionic Firebase Email Authentication

This lesson, we’re going to learn how to integrate ionic firebase email authentication with step by step instruction. To get started, we need to follow these instructions Enable Email Authentication method on Firebase Console Installing & Configuring firebase module with ionic project Enabling Email Authentication To get start, we need to login with firebase account …

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 …