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-appNext, 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/fireWhen 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 demoOpen 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
adamprescott.net 