Connect Firebase Realtime NoSQL Cloud Database with Angular Project

5 min readOct 2, 2018

In this tutorial, I am going to talk about How to connect Firebase Realtime NoSQL cloud database with Angular from Scratch? + Basic CRUD operation using Firebase API.

We’ll be using AngularFire official library for setting up Firebase database services in the Angular project.

Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to create a faster and quicker web and mobile applications. It supports iOS, OS X, Android and web platforms. It doesn’t require server-side backend programming language.

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)

Step by step Explanation

1. Technologies used

Node 8.11.1
Angular 6.0.0
Angular CLI 6.0.0
Firebase 5.5.1
Typescript 2.7.2

2. GitHub project files

https://bit.ly/2pq3GhJ

3. Install and setup Angular project using Angular CLI.

Setup Angular CLI in your system. If already installed then ignore.

npm install @angular/cli

Run the cmd in Angular CLI to setup the Angular project.

ng new <angular-firebase>cd <angular-firebase>

How to Setup Angular 6 Project using Bootstrap 4, SASS, Font Awesome, and Ng Bootstrap?

4. How to Setup Google Firebase 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.

5. How to setup Firebase (AngularFire library) in your 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 @angular/fire firebase --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 the 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 {}

6. How to create CRUD services using Firebase API?

In this last step, I’m going to explain how you can create CRUD operations in your project.

Create a separate shared folder, we are going to keep our CRUD service and Interface class file in it.
src > app > shared.

Go to terminal and run the given below command in Angular CLI to generate crud.service.ts and user.ts file.

ng generate interface shared/user   // Generate interface class fileng generate service shared/crud    // Generate crud.service.ts file

Then go to src > app > shared > user.ts file and declare the data type in the user.ts file as given below.

export interface User {
   $key: string;
   name: string;
   email: string;
   contact: Number;
}

After that go to src > app > shared > crud.service.ts file and write the CRUD logic in your crud.service.ts file as given below.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';
import { User } from '../shared/user';@Injectable({
  providedIn: 'root'
})export class CrudService {
  usersRef: AngularFireList<any>;      // Reference to users list, Its an Observable
  userRef: AngularFireObject<any>;     // Reference to user object, Its an Observable too
  
 
  constructor(private db: AngularFireDatabase) { }   // Inject AngularFireDatabase dependency in constructor
  // Create User
  AddUser(user: User) {
    this.usersRef.push({
      name: user.name,
      email: user.email,
      contact: user.contact
    })
  }  // Read User
  GetUser(id: string) {
    this.userRef = this.db.object('users-list/' + id);
    return this.userRef;
  }  // Read Users List
  GetUsersList() {
    this.usersRef = this.db.list('users-list');
    return this.usersRef;
  }    // Update User
  UpdateUser(user: User) {
    this.userRef.update({
      name: user.name,
      email: user.email,
      contact: user.contact
    })
  }    // Delete User
  DeleteUser(id: string) { 
    this.userRef = this.db.object('users-list/'+id);
    this.userRef.remove();
  }
  
}

Now you’ve successfully created CRUD services in your project. I’m going to explain how you can consume CRUD services in my next detailed article.

Conclusion

In this tutorial, 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.

(This tutorial first appeared on positronX.io on September 20, 2018, a place to learn free full stack software development)