Check out myAngular article series with live demos

Using Firebase with Angular

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Wed Jan 04 2017

In this post I will show how to integrate Firebase with an Angular application.

I will show how to use Firebase as a realtime database with data synchronization between connected clients.

For the purposes of this article I will create a simple “Friends” application.

Users can use the application to create a list of friends. The list is synched between all active browser sessions. Additions and removals are pushed to all users realtime, so if you have multiple browser windows open, changes will appear in all browser windows.

The Friends application is created using Angular CLI. I have also added AngularFire2 to simplify the integration between Angular and Firebase.

Create the database

Before we can connect to Firebase we have to create our own Firebase instance using the Firebase web console. The process is very simple, just follow the directions in the Firebase admin UI.

Once the database is created you can use the admin UI to specify access permissions for the database instance. There are several options to choose from (Twitter, Facebook, Github, etc).

For this demo I've kept it simple and disabled authentication. This is just for demo purposes. In a real application you should require some sort of user authentication.

The schema of the database is json based. You can use the admin UI to upload a json file to seed your database with some data.

Accessing the database

I now have a publicly available database hosted in the Firebase cloud, but I need some sort of connection string to access the database from the Angular application.

The connection string can be exported from the admin UI.

Here is the format:

{ apiKey: "[your apiKey]", authDomain: "[your authDomain]", databaseURL: "[your databaseURL]", storageBucket: "[your storageBucket]", messagingSenderId: "[your messagingSenderId]" }

Just substitute the values in []'s with the values specific to your own database.

Create the Angular application

Now that I have a connection string I can use it to configure the Friends application to talk to Firebase.

app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularFireModule } from 'angularfire2'; import { FormsModule } from '@angular/forms'; import { FriendService } from './friends-service'; export const firebaseConfig = { apiKey: "[your apiKey]", authDomain: "[your authDomain]", databaseURL: "[your databaseURL]", storageBucket: "[your storageBucket]", messagingSenderId: "[your messagingSenderId]" }; @NgModule({ imports: [ BrowserModule, AngularFireModule.initializeApp(firebaseConfig), FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ], providers: [ FriendService ] }) export class AppModule {}

The connection string is passed to the AngularFireModule.

AngularFire is downloaded separately from npm by running

npm install firebase angularfire2 --save

Next I will create a FriendService to talk to Firebase

friend-service.ts
import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { Injectable } from '@angular/core'; @Injectable() export class FriendService { constructor(private af: AngularFire) {} getFriends(): FirebaseListObservable { return this.af.database.list('/friends'); } addFriend(friend: string) { return this.af.database.list('/friends').push(friend); } deleteFriend(friend: any) { return this.af.database.list('/friends').remove(friend) } }

The service offers some basic crud methods to manage the list of friends. The data is stored in a list called "friends". This list was initially populated through the admin UI when I uploaded my seed json file.

The only remaining part is creating a simple component with a UI to display, add or remove friends.

app.component.ts
import { Component, OnInit } from '@angular/core'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { FriendService } from './friends-service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { items: FirebaseListObservable; name: string; constructor(private friendService: FriendService) {} ngOnInit() { this.items = this.friendService.getFriends(); } add() { this.friendService.addFriend(this.name); this.name = ''; } remove(friend) { this.friendService.deleteFriend(friend) } }
app.component.html
<h2>List of Friends</h2> <table> <tr *ngFor="let item of items | async"> <td>{{item.$value}}</td> <td><button (click)="remove(item)">Delete</button></td> </tr> </table> <h2>Add Friend</h2> <input [(ngModel)]="name" /> <button (click)="add()">Add</button>

Here is a screenshot of the application:

I have deployed the code to Github if you are interested in trying it out.

If you liked this article, it to your friends.

I also invite you to follow me on twitter