Angular 4 firebase tutorial

If you have a mindset to get deeper into building angular 4 applications, then this is your great starting point. In this Angular 4 Firebase tutorial, you will learn how to create Angular 4 project with firebase? You will also learn how to build your first Angular 4 application with firebase. So, let’s start Angular 4 Firebase tutorial.


If you are new to Firebase then I recommend you to go through this post what is Firebase and its features?


Install Fresh Angular Project Using CLI

In this Angular 4 Firebase tutorial, we will install a fresh angular project using CLI. To do so, open your terminal and run following command.

ng new yourprojectname

Above command will install a fresh Angular project on your system. After installation run this project, use the following command.

ng serve


Update Angular 2 to Angular 4

CLI method installs Angular 2. As we know Angular 4 has been released. So we will have to update it. Before that you may be curious, “How can I check that I have installed Angular 2 ?” You can run the following command within your project folder.

ng v


You can open package.json. You will see dependencies and their versions like below screenshot. It’s showing that you have installed Angular 2.

angular 2 dependency images


We will update our project from Angular 2 to Angular 4. To do so, go to your project folder and run following command.


For Mac/Linux Users

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save


For Windows Users

 npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save 


We also need to update typescript. To do so, run following command within the project folder.

npm install typescript @2.2.1 --save

To check whether Angular 2 has been updated to Angular 4 or not, use the following command.

ng v


You may check the package.json file. It will look like below. All libraries have been updated to Angular 4.

Angular 4 dependency


How to Setup Firebase Environment For Angular 4 App

To create Angular 4 application with Firebase, you need to setup a fresh firebase project from scratch. So, let’s learn how to setup Firebase project step by step.

  • Login to your Google account
  • Go to Google Firebase
  • Click on “Create New Project”
  • Write your project name (For this tutorial, I’m naming it “AngularFirebaseApp”)
  • Click on “Create Project”

Firebase welcome page


On clicking on “Create project” you will land on the following screen.

firebase web app


As we are working on Angular 4 web app so, we will select option accordingly. Just click on “Add Firebase to Your Web App”. Copy the given information and save it to a text file for further use. Yes, we will use it a bit later. As of now you just save it and go ahead.


firebase console information


How to Install Firebase In Angular 4

As we are creating Angular 4 application with firebase so, we need to install Google Firebase 2 within Angular 4 project. Use cd yourprojectname to go inside your project folder.

We need firebase and angularfire2 both packages to use Firebase real time database. For that, head over to your project folder and run following command which use node package manager to install firebase and angularfire2.

npm install angularfire2 firebase --save

You can head over to node_modules to see both installed packages.


Firebase Setting in Project Folder

After fresh project installation, setup firebase environment, and Firebase installation, we need to setup firebase in Angular 4 project. To do so, open src/app/app.module.ts file in your favorite text editor and import required module in it. We need to import AngularFireDatabaseModule and AngularFireModule. We also need to define some important stuff. If you remember, I recommended you to save the firebase console information. Now it’s time use that. Just put that information.  See below code.


import { AngularFireDatabaseModule } from 'angularfire2/database';

import { AngularFireModule } from 'angularfire2';

export const firebaseConfig = {

apiKey: "AIzaSyB3ScSnH9nHnj69XvY_xOAfJcA6Z-L0w90",

authDomain: "",

databaseURL: "",

projectId: "test-angular-76078",

storageBucket: "",

messagingSenderId: "298986727632"


The next step is to add AngularFireModule and AngularFireDatabaseModule to  module to imports array in ngModule.

imports: [








Note: After import of angularfire2 and Firebase, you may face the following error somewhere.


Can’t resolve ‘promise-polyfill’


To resolve this error run below command in your project folder


 npm install promise-polyfill --save-exact 

Now go to src/app/app.component.ts and import following.

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';


So, We are all done with Firebase setting in Angular 4 project. Now we all set to build our Angular 4 app with Firebase. Let’s learn step by step.


How to Build Small Angular 4 App With Firebase

In this Angular 4 firebase tutorial, we are going to build a small Angular 4 application in which we will retrieve a list of book and their prices from firebase real time database.


In order to build Angular 4 Firebase app, we need to insert data in Firebase real time database. In our case, our data is a list of books and their prices, which we will insert manually.


To insert data login to firebase and click on the database (you will find it in left side).  You will see the following screen.

Firebase real time database


Click on add child (plus icon). Now you will see below screen.

firebase list screen


Enter a list name. See below image. And click add. I am giving its name “Books”.

insert data in firebase


Now we will add the name of the books and their prices one by one. See below image for example.

insert data in firebase


Now go to rules tab on the same page. You will see the following screen.

firebase database rules


Replace existing rules by the following.

   "rules": {
    ".read": "true",
    ".write": "true"


After changing the rules your screen should be following.

Firebase database rules


We have prepared our database in which we have stored a list of book and their. Now we will retrieve this list and render on screen. Let’s learn how to do that.


Go to src/app/app.component.ts and insert below code.

export class AppComponent {

booklists: FirebaseListObservable<any[]>;

  constructor(public af: AngularFireDatabase) {

    this.booklists = af.list('/Books');




Above code will fetch data from Firebase real time database and store in book lists.
Now we will display this list of data. Go to src/app/app.component.html and add below code.


    <li *ngFor="let booklist of booklists | async">;

       {{ booklist.$key }} : {{ booklist.$value }}



Here we are using Angular 4 built in *ngFor


Now head over to your browser, you will see a list of book and their prices.


Congratulations, we have successfully built angular 4 application with firebase.


Final Words:

In this Angular 4 Firebase tutorial, I have used Firebase as a database. But you can use your desired database. Hope you will be able to create your angular application and retrieve data from the database. If you found this tutorial helpful and want to get latest updates, do join us on Facebook, LinkedIn, and Twitter.