Ionic Using Angular

In this section you’ll find articles, guides, and resources on how to use Ionic Framework on top of Firebase using Angular as a development framework. All of this guides use the package @ionic/angular.

How to get the document ID with AngularFire
First Published: 9 June 2019
Updated on: 9 June 2019

AngularFire added a new cool feature in version 5.2.0, the ability to fetch a document’s ID without needing to store it inside the document first. You don’t need to install any additional packages or anything like that, now the .valueChanges() method that transforms the AngularFirestoreCollection into an array receives a parameter like this: .valueChanges({ idField: 'propertyId' }); Where idField is the parameter we’re passing the .valueChanges() and the 'propertyId' is the name we want the ID’s property to have inside our object. ... Read More

PRO Authentication Guards with AngularFire
First Published: 4 June 2019
Updated on: 4 June 2019

AngularFire dropped a new version (version 5.2.0) recently and added some great features. One that immediately made me happy was the new AngularFireAuthGuard which is exactly what you’re thinking, its own Authentication Guard, meaning we don’t need to build our own anymore. Today you’ll learn how to use AngularFire new built-in authentication guard, and how to tweak it to fit your needs. We’ll cover the process in 4 straightforward steps: ... Read More

What to expect when migrating to Ionic 4
First Published: 5 May 2019
Updated on: 6 June 2019

Since Ionic 4 was just released I spent a couple of days updating one of my applications to see what I could accomplish. Today I want to share with you a bit of what I found. The entire upgrade process was painless, since there aren’t many big changes, moving from V3 to V4 didn’t give me a headache as I was expecting, the only thing I’m still testing is the migration from Cordova to Capacitor because I haven’t made the time to read their docs. ... Read More

Role-based authentication with Ionic & Firebase
First Published: 24 April 2019
Updated on: 24 April 2019

Today you’ll learn a bit about role-based authentication, and how to show/hide different part of your apps to different kind of users. We’ll work through an example, you have a button on your page that should only be visible to admin users. If an admin user logs in they should see two buttons in the home page like shown in the picture below. And if a regular user logs in they should only see one of the buttons, like shown in the picture below. ... Read More

How to use Modals as detail pages
First Published: 4 April 2019
Updated on: 4 April 2019

Should you always create a new page when you want to display data? This is something I started to ask myself after a project I was working for a big bank, the UX designers proposed we used full-screen modals to show some of the information. I kinda liked it so started applying it in some of my personal projects, for example, I’m building a budgeting app to use with my wife, we had a page where we see the list of all of our accounts, there are no interactions, it just shows us the accounts with the money that’s in them, so it made sense to transform that one into a modal. ... Read More

Set Up Cloud Firestore Security Rules
First Published: 14 September 2018
Updated on: 24 September 2018

With the Cloud Firestore Security Rules, we can focus on building a great user experience, without having to manage infrastructure or write server-side authentication and authorization code. The idea is to authenticate users through Firebase Authentication and set up rules to determine who has access to data stored in Cloud Firestore. You can find your security rules in the Rules tab in the Cloud Firestore section of the Firebase Console. ... Read More

Set Up Cloud Firestore Security Rules
First Published: 29 August 2018
Updated on: 24 September 2018

With the Cloud Firestore Security Rules, we can focus on building a great user experience, without having to manage infrastructure or write server-side authentication and authorization code. The idea is to authenticate users through Firebase Authentication and set up rules to determine who has access to data stored in Cloud Firestore. You can find your security rules in the Rules tab in the Cloud Firestore section of the Firebase Console. ... Read More

Using Firestore with AngularFire2
First Published: 22 August 2018
Updated on: 24 September 2018

In a previous tutorial, we learned how to CRUD data using Firestore, today we’re going to learn more about how everything works. AngularFirestoreDocument Explained The AngularFirestoreDocument service is a wrapper around the native Firestore SDK’s DocumentReference type. It’s the AngularFire2 way of providing strong typings to Firestore documents. The most common things you can do to Documents in Firestore is to store, update, and remove them, and the AngularFirestoreDocument API is easy to use that way. ... Read More

What is Capacitor, and where does it fit with Ionic Development?
First Published: 8 August 2018
Updated on: 24 September 2018

“Jorge, what is Capacitor, is it going to replace Cordova?” “Do I need to upgrade my apps now?” Why is the Ionic team making me use this? These are some of the questions I’ve gotten in the past few weeks from readers, some of them hopeful because they hated working with Cordova, others afraid and even angry thinking someone was going to force them to use this new tool. ... Read More

Learn how to use Angular Guards to protect your pages in Ionic apps
First Published: 25 July 2018
Updated on: 24 September 2018

To explain the concept of an authentication guard, we need to first get a bit of context about how the navigation works on Ionic Framework v4+. Ionic uses Angular Router for navigation, which moves the user through the application using URLs, if you go ahead and open the src/app folder, you’ll find the file app-routing.module.ts, open it and you’ll see the CLI created a route for every page you generated. ... Read More

My first encounter with Ionic 4
First Published: 11 July 2018
Updated on: 24 September 2018

Over the weekend I started migrating the EventManager tutorial application to Ionic 4 and replacing Cordova with Capacitor, today I want to share with you a bit of what I found. The entire process has been really fast (I can’t code on side-projects for several hours at a time so if I say something took me around 3 days it means maybe 4 or 5 hours split on those 4 days) moving from V3 to V4 didn’t give me a headache as I was expecting, the only thing I’m still testing is the migration from Cordova to Capacitor because I haven’t made the time to read their docs. ... Read More

Building Your First Firebase Powered Ionic Framework App
First Published: 2 July 2018
Updated on: 24 July 2019

This is the first post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. => You are here Authentication. Handling Objects. Handling Lists. Firebase Transactions. Firebase Cloud Storage. Firebase Security Rules. First of all, Thank you! It means a lot that you trust me enough to guide you through this journey. ... Read More

Firebase Authentication for Ionic Apps
First Published: 2 July 2018
Updated on: 24 July 2019

This is the second post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. Authentication. => You are here Handling Objects. Handling Lists. Firebase Transactions. Firebase Cloud Storage. Firebase Security Rules. If you’ve ever built an authentication system you know it can be a pain, setting up secure servers, building the entire back-end, it can take a while when all you want is to focus on making your app great. ... Read More

Firebase Security Rules
First Published: 2 July 2018
Updated on: 24 July 2019

This is the seventh and last post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. Authentication. Handling Objects. Handling Lists. Firebase Transactions. Firebase Cloud Storage. Firebase Security Rules. => You are here We are going to start preparing our app to go public, so the first thing we will need to do is update our security rules on the server, we do not want people connecting to the app and having access to someone else’s data. ... Read More

Firebase Transactions
First Published: 2 July 2018
Updated on: 24 July 2019

This is the fifth post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. Authentication. Handling Objects. Handling Lists. Firebase Transactions. => You are here Firebase Cloud Storage. Firebase Security Rules. We are going to keep working with lists, right now we will start creating a list of guest for an event. ... Read More

Handling Lists from Firebase within Ionic Framework apps
First Published: 2 July 2018
Updated on: 24 July 2019

This is the fourth post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. Authentication. Handling Objects. Handling Lists. => You are here Firebase Transactions. Firebase Cloud Storage. Firebase Security Rules. We have been learning a lot about Firestore in these few chapters, ranging from authentication to CRUD (hey, you even learned about Promises). ... Read More

Handling Objects from Firebase within Ionic Framework
First Published: 2 July 2018
Updated on: 24 July 2019

This is the third post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. Authentication. Handling Objects. => You are here Handling Lists. Firebase Transactions. Firebase Cloud Storage. Firebase Security Rules. We learned about authentication and how Promises work, now it is time to add some more functionality to our app, we are going to get to work with objects from the firestore database, while we create a profile page for our users. ... Read More

Uploading Pictures to Firebase Cloud Storage
First Published: 2 July 2018
Updated on: 24 July 2019

This is the sixth post of a 7 post series that will teach you how to build an app using Ionic Framework and Firebase from scratch. Introduction and the Setup Process. Authentication. Handling Objects. Handling Lists. Firebase Transactions. Firebase Cloud Storage. => You are here Firebase Security Rules. In this chapter we are going to be using one of Firebase’s best features, Storage, it will let you store binary data in your Firebase application, meaning you can upload files :) ... Read More

How to use the async/await syntax in Ionic for Firebase calls
First Published: 27 June 2018
Updated on: 23 July 2019

Do you keep running into Cannot read property X of undefined? If you’re writing JavaScript/TypeScript you probably do since the language is almost entirely asynchronous. Most of the time is because we forgot to return a promise inside of a .then() or because we wrote the code inline without knowing it returned a promise. In this post we’re going to talk through a new syntax for asynchronous code called async/await and it’s for handling Promises in JavaScript. ... Read More

Upgrade your Ionic App to Firebase 5+ and AngularFire2 rc-10
First Published: 17 June 2018
Updated on: 24 September 2018

Great news, thanks to some book readers that pointed me out in the right direction I managed to upgrade my book Master Firestore to the latest versions of Firebase and AngularFire2, right now we’re using: "angularfire2": "^5.0.0-rc.10", "firebase": "^5.0.4", "ionic-angular": "3.9.2" And the app is working fine, the best news, when you upgrade to Ionic 4 in the future you won’t have to refactor this part :-) I’ll use the next few lines to explain step-by-step how we did this. ... Read More

How do I build a functionality that works both for mobile and web?
First Published: 26 April 2018
Updated on: 24 September 2018

Today you’ll learn how to build functionalities that need native plugins but also work for the web. It’s going to be a short read, but I felt like writing it because a few people have asked me that question over email. This article uses Cordova, I strongly recommend using Capacitor since it can be a bridge between native and web APIs. First, let me explain what I mean by functionality that works in both places. ... Read More

Building a CRUD Ionic application with Firestore
First Published: 13 April 2018
Updated on: 18 September 2018

Firestore is Firebase’s new database. It’s a managed NoSQL document-oriented database for mobile and web development. It’s designed to store and sync app data at global scale easily. Some of its key features include: Documents and Collections with powerful querying. Offline access to the WEB SDK. Real-time data sync. Today we’re going to learn how to integrate Firestore with Ionic to create a CRUD work-flow. This sample app will show you how to: ... Read More

How do I prevent a new user from login until they verify their email address?
First Published: 18 January 2018
Updated on: 24 September 2018

Hello, please have you done any tutorials on email verification using firebase for ionic? I found out in the docs how to firebase.auth().currentUser.sendEmailVerification(), but what I can’t figure out if how to prevent the app from login in the new user until they have verified their accounts in the email sent to them. I get that question a lot, so first let me start by saying I’m sorry it took me this long to write it down. ... Read More

Can I write my Cloud Functions in separate files?
First Published: 15 January 2018
Updated on: 24 September 2018

Right after I shared one of my first Cloud Functions articles on Twitter, my buddy, Justin asked me a question: He wanted to know if there was a way to keep Cloud Functions on separate files, I hadn’t given it much thought since I was using mostly a couple of functions per app. So my answer was “I don’t know, I think so, but I don’t know…” I told Justin I was going to play with it during the weekend, which was a lie, I ended up playing Super Mario Odyssey instead, but on Monday I set up to achieve this. ... Read More

Learn how to use FCM to receive Push notifications on Ionic Framework
First Published: 28 December 2017
Updated on: 24 September 2018

FCM (or Firebase Cloud Messaging) is an excellent way to keep our users engaged with our app, and it also helps them by notifying them of important things that are happening. We’ll go through how to setup the FCM Cordova Plugin to work with your Firebase app and handle the data from arriving notifications when the user taps on it on the phone. FCM Plugin SET UP The first thing we need to do is install the FCM plugin: ... Read More

Learn How To Use Cloud Functions Triggers for Firestore
First Published: 22 December 2017
Updated on: 24 September 2018

In this tutorial, we’re going to be exploring Firebase Cloud Functions to run code on Firebase servers. One of the main struggles when working with role-based authentication is allowing the admin users to create or invite people to their team. If you use the admin account to create the new user, Firebase will log out and sign-in with the new account. To fix this, we’ll use Firebase Cloud Functions. The idea is that instead of creating the account, our admin user can store the information they want in the database. ... Read More

Add Firebase Storage Support to AngularFire2
First Published: 6 December 2017
Updated on: 24 September 2018

Have you tried to integrate Firebase Storage when using AngularFire2 in one of your apps? Is it even possible? Are you adding extra bloat to your app from the JS SDK? Will the code be easy to maintain in the future? Those are some of the questions that are probably worrying you right now because let’s face it, the last thing you want is that after all your hard work, you end up with a nightmare of a code base to maintain. ... Read More

Introducing Cloud Firestore
First Published: 25 October 2017
Updated on: 24 September 2018

Unless you’ve been living in a cage with no internet access you’re probably very excited about Cloud Firestore. It’s the new database Firebase launched, the fundamental differences with the Firebase Real-Time Database (RTDB for short) are: Document/Collection based instead of a big JSON tree. Supports chained queries. Has offline persistence for its web SDK. A few weeks before writing this I emailed my subscribers asking what excited them the most, and without a doubt, offline persistence and chained queries were tied neck to neck. ... Read More

3 Things you can do right now to improve your Ionic and Firebase app performance
First Published: 9 September 2017
Updated on: 24 September 2018

You want to give your users the best experience when using your app, heck, and I was constantly Googling or going into the Ionic forums to ask “Why is Ionic + Firebase so slow?”. The truth is, it isn’t slow, I was just doing a few things wrong, mostly due to a lack of JavaScript knowledge, but there were a few specific things that I could improve over time. ... Read More

How to fix getting a blank page when trying to use Facebook login?
First Published: 9 September 2017
Updated on: 24 September 2018

A blank page after login is a common problem when using Facebook as a sign-in method, especially when we’re in development mode. It happens because you already logged in and authorized the app, so when it tries to log-in again, it goes blank. What most people do is to manually go into their Facebook account and remove their app so they can try again, but is this the best use of your time? ... Read More

Do you need to hide your Firebase API keys for Ionic apps?
First Published: 6 September 2017
Updated on: 24 September 2018

About 3 or 4 times a month someone asks this questions, they are worried that since Ionic apps are client-side code (HTML, CSS, JS), someone can see their Firebase credentials and mess with their data. I understand why this is a concern. People want to keep their data private (ALL OF IT!). But there’s one thing we need to know about Firebase API keys. The fact that someone knows your apiKey is not a security risk alone (more on that later). ... Read More

Why does Firebase return `undefined` when fetching the `uid`?
First Published: 16 August 2017
Updated on: 18 June 2019

Cannot read property uid of undefined How many times have you seen that error message? (Be honest!). I’ve seen it so many times (both on the console and my inbox) that I lost track of the exact number, but it’s probably embarrassingly high. Today we’re going to go through why that error happens and the two things you need to keep in mind to never see it again. ... Read More

Offline Sync With AngularFire2
First Published: 26 July 2017
Updated on: 24 September 2018

NOTE: This post is out-dated, instead of using a 3rd party library you can use Cloud Firestore, the offline by default new database. One of the most asked questions I get is always around how to get Firebase to work offline with Ionic apps, for when our users are on unstable connections. I’ve always given the same answer, “I’m waiting for Firebase to add official support for their JS SDK so I can use it”. ... Read More

Ionic Social Login using Firebase
First Published: 1 June 2017
Updated on: 24 September 2018

Have you been able to use Ionic Social Login in the past? It used to be a lot harder because platforms like Firebase didn’t support social authentication for cordova based apps out of the box. Today it’s much easier to use Ionic social login because Firebase added full cordova support for this in their 3.9.0 release (they just didn’t make a big announcement about it :P). Today we’re going to see how to get social login working on Ionic, in this example we’ll use Google Sign-In, but feel free to just change the provider to whichever you like without much extra work on your part :-) ... Read More

Firebase Phone Number Authentication
First Published: 25 May 2017
Updated on: 24 September 2018

In Google I/O17 the Firebase team made a bunch of awesome announcements, among them they released Firebase 4.0.0 which comes with a new authentication provider. You can use Firebase Authentication to sign in a user by sending an SMS message to the user’s phone. The user signs in using a one-time code contained in the SMS message. By the end of this post, you’ll have a working authentication system using only the user’s phone number: ... Read More

Learn How to Use Firebase Cloud Functions to create a user profile
First Published: 11 May 2017
Updated on: 24 September 2018

A week or so ago (Yes, I get that if you read this later it won’t be a week, but bear with me) a reader asked me an interesting question, if you’ve seen my other authentication tutorials, you’ll see that right after we create or sign up a new user, we create a /userProfile/<userId> node to store the data we have about our user. That way we create a record in our database and when the user starts adding more info about herself we can just add it to that user profile node. ... Read More

PWA with Ionic Framework
First Published: 6 April 2017
Updated on: 18 June 2019

Last week I sent an email to my subscribers asking them if they had any questions about PWA (Progressive Web Apps) with Ionic Framework. My idea was to answer most of them in my book but seeing how so many people had the same questions. I decided to share them as a blog post. First, let’s start by defining what a PWA is, Google describes them as: Progressive Web Apps are user experiences that have the reach of the web, and are: ... Read More

Firebase Cloud Functions, (or running code on Firebase Servers!)
First Published: 23 March 2017
Updated on: 18 June 2019

Taken straight from the official website: Firebase Cloud Functions is a hosted, private, and scalable Node.js environment where you can run JavaScript code. Firebase SDK for Cloud Functions integrates the Firebase platform by letting you write code that responds to events and invokes functionality exposed by other Firebase features. So, what exactly are Firebase Cloud Functions? They are a hosted, private, and scalable Node.js environment where you can run JavaScript code. ... Read More

Ionic twitter login => A Step-by-step guide
First Published: 8 March 2017
Updated on: 24 September 2018

Have you tried to get Ionic Twitter login working with Firebase? There was a change when Firebase updated to V3 that made all the cool sign-in with pop-up and redirection stop working with Cordova apps. It sucked! But then I realized something, yeah, it sucked for us as developers, but it pushed us to find a better way for our users, and it was to find the native plugins. ... Read More

Ionic Google Authentication using Firebase
First Published: 2 March 2017
Updated on: 1 November 2018

Google and Facebook are the most common ways to use social login in your apps, a while back we covered Facebook login using Firebase, and today it’s time for Ionic Google authentication. We’re going to create a Google login for our ionic apps, and then extract some information from the auth object (profile picture, name, and email) to show on our home page. We’re going to break down the process into 3 steps: ... Read More

WTF is a Promise?
First Published: 16 February 2017
Updated on: 18 June 2019

Promises are a big part of JavaScript, especially when you’re building cloud-connected applications since they are often used when fetching a JSON API or doing AJAX work, I’m going to use this post to explain why. What is a Promise A promise is something that will happen between now and the end of time, it’s something that will happen in the future, but not immediately. (I took that definition from Wes Bos’ course ES6 for Everyone, you should check it out. ... Read More

Learn How to Validate Forms with Ionic and Firebase (Client and Server Side)
First Published: 18 January 2017
Updated on: 24 September 2018

Are you sure the type of data you’re sending from your Ionic app is the one that’s storing in your Firebase database? It turns out that for me, it wasn’t. I was checking out a revenue tracking app I build for my wife, she organizes events, and I was convinced that all my programming was on point, little did I know that some of the ticket prices were storing in Firebase as string instead of number =/ ... Read More

Learn how to perform queries in Ionic using AngularFire
First Published: 1 December 2016
Updated on: 18 June 2019

Introduction Pulling lists of data from Firebase is helpful. You can retrieve your stored data whenever you want, but what if you don’t want all of it? What happens when you want to just get some records, like only the people over 40 because you’re giving a talk in possible schools for their children? For that you have to learn about how to query data in Firebase, don’t worry, it might sound intimidating, but it’s pretty easy since Firebase already created the querying functions for us, we just need to use them :-) ... Read More

Copy the 5 hacks I use when building Ionic and Firebase mobile apps
First Published: 23 November 2016
Updated on: 17 June 2019

I spent a good chunk of 2016 building an app with Ionic 2 and Firebase 3 and it was enjoyable and a great learning opportunity. Today I want to write a little less technical than usual for #TutorialThursday and dive into 5 “hacks” that will let you work better with Ionic and Firebase. We all know the basics, like setting up our app, how to connect with Firebase, etc. ... Read More

Implement a Search Bar on your Ionic app to filter your Firebase data
First Published: 16 November 2016
Updated on: 17 June 2019

Introduction As you probably know by now, Firestore is a noSQL database, something a lot of people really like. But if you come from a SQL background, like I do, sometimes things that are easy for other people end up being a real challenge for us. I want to show you one way I found on how to integrate a search-bar with Firestore, so that you can start typing and your Ionic app filters all the data in real time. ... Read More

AngularFire Authentication for Ionic Framework: Step-by-Step Guide
First Published: 5 November 2016
Updated on: 24 September 2018

This post works with Ionic 3 and angularfire2, for a version about Ionic 4 and @angular/fire check this banner later, I’m working on it. We’re going to create an AngularFire2 Authentication system for Ionic apps. Angularfire2 makes certain things more natural, like syncing lists and managing the user’s authentication state in real-time. Today we’re going to take advantage of that to create an Angularfire2 authentication process that covers: ... Read More

How do you structure your data in your Firebase Database?
First Published: 13 October 2016
Updated on: 17 June 2019

Have you worked with Firebase Database yet? I don’t know about your background, but when I decided to give Firebase a shot I had spent years using PostgreSQL, so I came from a very SQL experience, and Firebase data structure was entirely new to me. I was trying to do a lot of things in the SQL way (like normalization) until I realized that it doesn’t work that way, Firebase is different. ... Read More

Ionic 2 Facebook Login: Step-by-step guide to get it working with Firebase
First Published: 6 October 2016
Updated on: 24 September 2018

Ionic 2 Facebook login has become one of the most used methods to get users to sign-in to your hybrid app that it’d be dumb not knowing how to do it. In this ‘short’ guide, I’m going to walk you through the process of getting someone who just downloaded your app to sign-in using Ionic 2 Facebook login credentials with Firebase. We’ll break things down into three main steps: ... Read More

Step-by-step Guide: Setup an AngularFire Ionic Project
First Published: 2 October 2016
Updated on: 16 June 2019

Integrate the latest version of @angular/fire with Ionic Framework Today I want to share with you a step-by-step guide on how to set-up a new AngularFire Ionic project so you can start building your apps in no time. We’re going to break things down into four simple steps you’ll need to follow. Step #1: Make sure your development environment is up to date Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you won’t have to be switching context between coding and installing. ... Read More

Learn how Firebase Anonymous Login works on Ionic Framework apps
First Published: 24 August 2016
Updated on: 9 June 2019

Have you worked with Firebase Anonymous Login before? The idea is perfect, let’s say you want to create an app, and have users be able to use it, and be able to save some stuff to your database without signing in and if they want to use more features, they’ll need to create an account. Now Firebase Anonymous Login lets us do that, and also it enables you to link the anonymous account with the new email + password account, so the user’s data is always there. ... Read More

Hybrid App Development: How do I get Started?
First Published: 12 April 2016
Updated on: 9 June 2019

Want to get started with Hybrid App Development but not sure what you need to know first? Don’t worry, I’ll cover here what the skills you need to get up and running with hybrid app development if you follow this path, you’ll be building your apps within a month (maybe less if you can put it more time). Get Started with Hybrid App Development If you want to get started with hybrid app development, first you’ll need to understand what this is: ... Read More