Connect Firebase Cloud Database with Angular App

Advantages of using AngularFire Library

• Supports Push Notifications.
• Offline Data Storage.
• Allows ngrx API Implementation.
• Based on the RxJS Observable Pattern.
• Real-time Data Sync Across All the devices.
• Support Download, Upload & Delete Images, Video & Blob Files.
• Support user authentication (Google, Facebook, Twitter, Github, Email & password)

Prerequisite

In order to work with this demo you must have Node.js and Angular CLI installed in your system.

If you are beginner then you should check out this tutorial to: Set up Node JS

Enter command in the terminal to install the latest version of Angular CLI:

npm install @angular/cli -g

Setup Angular Project using Angular CLI

Run command to install Angular 8 project:

ng new angular-firebase
# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? CSS

cd angular-firebase

Setup Google Firebase Database Account

Go to Firebase website login using your email id. When you see given below screen click on Add Project section.

Afterward, Enter your project name, accept the terms and condition and click on create a project button.

Once your project is set up, then click on your project then you’ll see your admin dashboard navigate to Develop > Authentication > Web setup click on Web setup button, and a popup will appear along with your firebase credentials.

Copy your firebase credentials from here.

Setup Firebase (AngularFire library) in Angular Project

Once you are done with setting up the angular project and firebase account.  It’s time to install AngularFire and Firebase from NPM.

Run the given below cmd in Angular CLI.

npm install firebase @angular/fire --save

Let’s create the connection between firebase and your angular project.

Go to src/environments/enviorment.ts and enviorment.prod.ts files in your project folder. Then add your firebase configuration details in both the environment files as given below.

Now, import AngularFireModule and environment in app.module.ts file, then declare AngularFireModule into the imports array.

You can optionally use your FirebaseApp name with the itializeApp method.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Firebase
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app-name')
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Now you are all set to use Firebase Realtime NoSQL cloud database with your Angular App.

In next step, I’ll discuss how to import various Firebase modules in app.module.ts

Import Firebase modules efficiently

There are various Firebase modules available for performing certain database tasks. But it is always advisable to use only required Firebase modules in your project.

If you are building authentication service in your app. Then only import AngularFireAuthModule in app.module.ts file. By this way, you’ll be able to keep your overall app size to low.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Firebase modules
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';
@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app-name'), // Required for everything
    AngularFirestoreModule, // Only required for database features
    AngularFireAuthModule, // Only required for auth features,
    AngularFireStorageModule // Only required for storage features
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Project Files

Click on the below button to get the code files from Git repo.

Git Repo

Conclusion

I’ve talked about Google Firebase database and its powerful features. You will learn to create an account in Google firebase.

How to setup firebase services in your Angular project and How to create basic CRUD services using Firebase API.

I hope you’d love this tutorial If you’ll find this article useful then let it reach to others.