What is Firebase and how to use it with Angular?

Firebase is a ready-to-use backend service from Google. Angular and Firebase can work with the help of a few configurations only. Angular developers can create full apps with a database and login system with the help of Firebase.

Let’s dive deeper into the topic.

Introduction to Firebase

Google has prepared it for the front-end developers to create apps without the knowledge of the backend. You can use it to create full-fledged apps and websites without the need for a separate backend. You will not need any database server and serverside language expert if using Google Firebase.

As per the available stats, there are almost 50,000 companies across the globe which rely on Google Firebase. The numbers show the huge popularity of Firebase as an application development tool.

Main functions and features of Firebase

Some main functions and features provided by Firebase are:

Authentication

Firebase Authentication offers ready-made UI frameworks and simple-to-use SDKs. These SDKs or software development kits are useful for verifying user identities. We can allow login and authenticate users via phone numbers, social media logins, email addresses, and more.

Firebase Realtime

Firebase Database, being a NoSQL cloud database allows developers to store and sync data across various clients in real-time. It is also known as Firestore. Firestore is used in applications that show real-time changes.

As per the data, Ahoy Games boosted their purchases by 13% using Firebase Remote Config personalization!

Even Hotstar tested it and could increase its user engagement by 38%.

Here’s what Mr. Kshitij, VP of Engineering, Hotstar says on Firebase

“Moving to Firebase was one of the best decisions we ever made. Firebase helps us safely, easily, and quickly run experiments and roll out new features to enhance our user experience. We’re excited to continue growing with Firebase!”

Mr. Kshitij, VP of Engineering, Hotstar

Cloud Firestore

The Firebase Realtime Database’s next generation is called Cloud Firestore. It has built-in scalability to manage large-scale applications. It provides support for multi-region and faster querying capabilities. BuzzFeed, Airbnb, and Slack are some of the top companies that use Firestore. 

Cloud Storage

Cloud storage offers a dependable and scalable way to store and manage files. Developers can safely store and deliver data with Firebase Cloud Storage.

Understand Firebase Cloud Storage in a better way

Hosting

It is a hosting service from Google so its Firebase users don’t go anywhere. Nice work. Hosting offers SSL certificate service with many other security features.

Firebase hosting delivers positive results to many companies, some of them are JoshTalks, Doogle, eBay Motors, and Tapple.

Analytics

It is not a new feature at all. I have been using Google Analytics for the last 20 years if my calculation is not wrong. They have just integrated their Analytics with their own Firebase service. Because analytics is very old that is the reason why it works smoothly with Firebase.

Do you know that GameNexa Studios uses Firebase to boost its in-app purchases and make that monetization game strong?

Understand Firebase Analytics in a better way

Performance Monitoring

Google Firebase offers a performance monitoring feature to it. Monitoring performance is an essential feature nowadays. You can track network requests, app launch times, and other metrics in it. These stats help developers to improve the app’s performance.

Get a better understanding of performance monitoring through this video presentation

Cloud Messaging

It is a messaging service that is required in an app most of the time. Developers may send alerts and messages to users on Android, iOS, and the web with Firebase Cloud Messaging (FCM).

HOW TO USE FIREBASE WITH ANGULAR?

We can connect Firebase with Angular in no time. All the features we discussed of Firebase above can be used in Angular. I’ll walk you through how to use Firebase with Angular step-by-step.

Note: We will be using the free version of Firebase here.

Step 1: Launching the Firebase Project

1. Make a project in Firebase: Create a new project by visiting the Firebase Console at console.firebase.google.com.

2. Turn on Firebase Services: From the Firebase Console, turn on the Firebase services (authentication, firestore, storage, etc.) that you require for your project.

3. Obtain Firebase Configuration: Go to the Firebase settings and retrieve the Firebase configuration object (apiKey, authDomain, projectId, etc.). To initialize Firebase in your Angular application, you will require this setup.

Step 2: Installation and Setup of Angular

1. Establish an Angular Project: To set up a fresh Angular project, just use the Angular CLI:

 ng new my-firebase-app

2. Install the Firebase SDK and AngularFire: With npm, install the Firebase SDK and the AngularFire library:

npm install firebase @angular/fire

Step 3: Integration of Firebase Authentication

1. Set Up Authentication Techniques: In the Firebase Console, configure your authentication methods (email and password, Google, Facebook, etc.).

2. Module for Authentication in AngularFire: Add the AngularFireAuthModule to the module of your Angular application:

import { AngularFireAuthModule } from
'@angular/fire/auth';
@NgModule({
imports: [
AngularFireAuthModule
]
})

3. Verify Users’ Authenticity: For user authentication in Angular components, use the AngularFireAuth service:

import { AngularFireAuth } from '@angular/fire/auth';
constructor(private afAuth: AngularFireAuth) {}
signInWithEmailPassword(email: string, password: string) {
return this.afAuth.signInWithEmailAndPassword(email, password);
}

Step 4: Integrating Firebase Real-Time Database

1. Establish Database Rules: Using the Firebase Console, configure the database’s structure and rules.

2. Module for AngularFire Database: Add the AngularFireDatabaseModule to the module of your Angular application:

import { AngularFireDatabaseModule } from
'@angular/fire/database';

@NgModule({                                                                                                                                              
  imports: [
    AngularFireDatabaseModule
  ]
})

3. Get Real-Time Database Access: To communicate with Firebase Realtime Database, use the AngularFireDatabase service:

import { AngularFireDatabase } from
'@angular/fire/database';
constructor(private db: AngularFireDatabase) {}

getUsers() {
return this.db.list('users').valueChanges();
}

Step 5: Firebase Cloud Firestore Integration

1. Set up Firestore Rules: Configure your Firebase Console database and security settings.

2. Module for AngularFirestore: Add the AngularFirestoreModule to the module of your Angular application:

import { AngularFirestoreModule } from
'@angular/fire/firestore';

@NgModule({
imports: [
 AngularFirestoreModule
 ]
})

3. Open Firestore: To conduct CRUD activities on Firestore, use the AngularFirestore service:

import { AngularFirestore } from
'@angular/fire/firestore';

constructor(private firestore: AngularFirestore) {}

getUsers() {
  return this.firestore.collection('users').valueChanges();
}

Step 6: Integration of Firebase Cloud Storage

1. Configure Storage Rules: Use the Firebase Console to set up storage rules and structures.

2. Module for AngularFireStorage: Add the AngularFireStorageModule to the module of your Angular application:

import { AngularFireStorageModule } from '@angular/fire/storage';
@NgModule({
imports: [
   AngularFireStorageModule
 ]
})

3. Access Cloud Storage: Use AngularFireStorage service to manage file uploads and downloads:

import { AngularFireStorage } from
'@angular/fire/storage';

constructor(private storage: AngularFireStorage) {}

uploadFile(file: File) {
 const filePath = 'path/to/upload/' + file.name;
 const fileRef = this.storage.ref(filePath);
 return fileRef.put(file);
}

Are you interested in learning both Angular and Firebase?

Yes! Our trainers are pros at teaching Angular with Firebase. You’ll be a pro too with our Angular Master course!