
I recently started working on a new personal project that needed a database, and I just wanted something quick & easy. I remembered a colleague mentioning Firebase in the past and decided to take a look. After playing with it for a few days, I really dig it. I love that you can set up a database for free within a few minutes, and access it directly from the frontend without having to introduce a separate API layer.
In this article, I’ll walk through steps required to create a new Angular application and connect it to a Firebase Cloudstore database. You’ll need to sign up with Firebase to create the database, but it’s free and painless. Let’s get to it!
We’ll begin by creating a new application using the Angular CLI:
$ ng new firebase-app
$ cd firebase-app
Next, we’ll create our Firebase Cloudstore database. Go to firebase.com, and create an account or sign in. Add a new project and Cloudstore database in test mode. Finally, add a web app to the project. When you do this, you’ll be presented with instructions for adding the Firebase SDK to your app, as shown below.

Copy/paste the configuration details into our applicaton’s app.module.ts
file. (Don’t worry about putting it in the right spot–we’ll do that in a minute. Just get it in there so you have it.) Now it’s time to install the Firebase and the Angular Firebase module:
$ npm -i firebase @angular/fire
When you install @angular/fire
a browser will open for you to authenticate with Firebase, and you’ll be given an authorization code. Copy/paste the code back to the command prompt to finish installing the module.
With the module installed, we complete the necessary changes in app.module.ts
:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore' import { AppComponent } from './app.component'; import { DemoComponent } from './demo/demo.component'; // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyAx2cAfq9Pj3EzavXLkNc6_F9zWCyIayY4", authDomain: "ap-sample-1218e.firebaseapp.com", databaseURL: "https://ap-sample-1218e.firebaseio.com", projectId: "ap-sample-1218e", storageBucket: "ap-sample-1218e.appspot.com", messagingSenderId: "200601572991", appId: "1:200601572991:web:a335d1e106542870a9914a" }; @NgModule({ declarations: [ AppComponent, DemoComponent ], imports: [ BrowserModule, // Initialize Firebase AngularFireModule.initializeApp(firebaseConfig), AngularFirestoreModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
At this point, we’re actually done with setup and fully functional, but let’s add a new component to demonstrate its usage:
$ ng g c demo
Open demo.component.ts
, and add the following:
import { Component, OnInit } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.css'] }) export class DemoComponent implements OnInit { items: Observable<any[]>; constructor( private firestore: AngularFirestore ) { this.items = this.firestore.collection('items').valueChanges(); } ngOnInit(): void { } saveItem(value: string): Promise<any> { return this.firestore.collection('items').add({ value: value }); } }
Add some simple markup to add & display items in demo.component.html
:
<input #input type="text"> <button (click)="saveItem(input.value)">Add</button> <ul> <li *ngFor="let item of items | async"> {{item.value}} </li> </ul>
Finally, remove boilerplate code from app.component.html
and replace it with the demo component:
<app-demo></app-demo>
Now run the app. When values are submitted, they’re saved to our Firebase Cloudstore database, and the page will update in realtime as new records are added. Not bad for a few minutes of work!
$ ng serve --open
