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 setup 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

or

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

or

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

Angular 4 dependency

 

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

 

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: "test-angular-76078.firebaseapp.com",

databaseURL: "https://test-angular-76078.firebaseio.com",

projectId: "test-angular-76078",

storageBucket: "test-angular-76078.appspot.com",

messagingSenderId: "298986727632"

}

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

imports: [

BrowserModule,

FormsModule,

HttpModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireDatabaseModule,

],

 

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 booklists.
Now we will display this list of data. Go to src/app/app.component.html and add below code.

 

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

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

    </li>
  </ul>
</div>

 

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 your 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.