Google Cloud Firestore integration with Ionic and AngularFire

Google Cloud Firestore was just launched under beta and AngularFire with rc.5, Google Cloud Firestore is a big release for everyone who had experienced the pain of getting the relational query based data out of Firebase database :-)

This guide will help all those who are looking around for the starter source code on how to use this awesome features of the New Google Cloud Firestore collections and documents with added security rules.

Once you have your starter Ionic Framework app installed, point to project directory in CLI and run below to install AngularFire:

npm install firebase angularfire2 --save

In your app.module.ts file import as below :

import { AngularFireModule } from ‘angularfire2’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;
import { AngularFirestoreModule } from ‘angularfire2/firestore’;

Then reference it inside @ngModule as below:

AngularFireAuthModule,
AngularFirestoreModule.enablePersistence() //.enablePersistence() used for offline storage

Security rules, under Google Cloud Firestore has a new face and more secured to know more please read here.

Below is a sample security rule allowing only signed in user to read and write data from Google Cloud Firestore :

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
// Allow requests from authenticated users
allow read, write: if request.auth != null;
}
}
}

Initialising Observable and Collections

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from ‘angularfire2/firestore’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;

Then, declare interface:

interface Items {
description: string;
itemid: number;
}

Set Observable and Firestore collections:

itemsCollection: AngularFirestoreCollection<Items>; //Firestore collection
items: Observable<Items[]>; // read collection
constructor(public navCtrl: NavController, private afs: AngularFirestore) {
}
ionViewWillEnter() {
this.itemsCollection = this.afs.collection('items'); //ref()
this.items = this.itemsCollection.valueChanges()
}

Display, on UI:

<div *ngFor="let item of items | async">
<h1>{{ item.itemid}}</h1>
<p>{{ item.description}}</p>
</div>

Add new document to Firestore collection :

this.itemsCollection.add({
description: "1TB Space with great performance",
itemid: 13423
})
.then( (result) => {
console.log("Document addded with id >>> ", result.id);
})
.catch( (error) => {
console.error("Error adding document: ", error);
});

If you experience an error which tells you that Can't resolve '@firebase/webchannel-wrapper' then, run this command in you project directory:

npm install @firebase/webchannel-wrapper --save