You are currently viewing angularfiredatabase

What is angularfiredatabase

Angularfiredatabase means used fire database libraries in the angular project for the store and syncing the data at run time. Angularfiredatabase is best for the angular project. Because the fire database supports realtime data store and syncing. Fire database is the no SQL database. Angularfiredatabase is the part of the firebase. And firebase is the main feature of the realtime database. The Firebase database is the product of google that supports store data and syncing data ar run time. And provides the development (web and mobile application platform) platform for the developer with different development tools. By using the firebase api the realtime database is used for store and analyze data for multiple users with different platforms.

Tip: The firebase is available at

Interacting with your database

Firebase provides two different database solutions that support realtime data syncing.

  1. Realtime database
  2. Cloud firestore

Realtime database

Firebase is the original database. AngularFireDatabase is work with the realtime database. Realtime database provides low-latency solutions for web and mobile applications. Read more

Cloud firestore

Firestore is built on the success with a new and more intuitive data model for a developer. Firestores is the release with high features and faster queries more than the realtime database. Firestores is the newest database for mobile app development and a realtime database is the oldest database with slow working. Firebase working fast more than a realtime database. Using the angularfirestore create static HTML to increase your application perceived performance. If you want to read more about the cloud firestore click here.

Install angularfiredatabase

npm install firebase @angular/fire --save


import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

  selector: 'app-root',
  template: `
    <li *ngFor="let item of items | async">
      {{ }}
export class MyApp {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();

by default Angular project Libraries


Project Setup with Angular 2 CLI

If you haven’t install cli command lind interface (CLI) then first run this code.

$ npm install -g angular-cli

Create a new project of angular

$ ng new angular2fb

Anglar2fb in this folder you have created a new project and inside in this folder, you see the project structure.

Startup the webserver

$ ng serve

And now your project is accessible at http://localhost:4200

Installing Firebase and angularFire2

We need to add angular 2 firebase libraries into our project.

$ npm install angularfire2 firebase --save

Preparing Your Application for Firebase

Take the settings and paste it into a new file environments/firebase.config.ts in the following form:

export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'

And add the types of property to the compilerOptions configuration object in tsconfig.json.

   "compilerOptions": {
    "types": [

Importing AngularFireModule

import { AngularFireModule } from 'angularfire2';

Create Angularfire 2 module

  imports: [
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})export class AppModule {}

Inject AngularFire

Go to app.component.ts and add this

import { AngularFire, FirebaseListObservable } from 'angularfire2';

Inject AngularFire into that component

  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
export class AppComponent {
  constructor(af: AngularFire) {

Get access of firebase data by using the angular fire

Declare an object of type FirebaseListObservable<any[]>

import { Component } from '@angular/core';import { AngularFire, FirebaseListObservable } from 'angularfire2';
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})export class AppComponent {
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');

For print the data we can use the following code

  <li class="text" *ngFor="let item of items | async">

Read More

Visit the angular tutorial list. And make strong your angular concept. click here. is always written about agular concept for the angular lover. Ang writes about how angular makes your life easy if you are a web site developer.

This Post Has 3 Comments

  1. Somto

    After installing angularfiredatabase with this cmd – npm install firebase @angular/fire –save ,

    Is there need again to install Firebase and angularFire2 – npm install angularfire2 firebase –save ?
    According to what you said, “We need to add angular 2 firebase libraries into our project” .

    Doesn’t the first cmd to install angularfiredatabase take care of that?

    1. Muhammad Waqar

      no need to install firebase and anfularfire2 in the same project but if you change your project you have to need again do these things!
      Yes, we need to add angular 2 firebase libraries into our project.

  2. Blake Bowey

    Refreshing. You never diissapoint. Thank you for sharing..

Leave a Reply