Using Firestore with AngularFire2

First Published: 22 August 2018
Updated on: 24 September 2018

In a previous tutorial, we learned how to CRUD data using Firestore, today we’re going to learn more about how everything works.

AngularFirestoreDocument Explained

The AngularFirestoreDocument service is a wrapper around the native Firestore SDK’s DocumentReference type. It’s the AngularFire2 way of providing strong typings to Firestore documents.

The most common things you can do to Documents in Firestore is to store, update, and remove them, and the AngularFirestoreDocument API is easy to use that way.

For example:

  • .set() stores a Document in a database collection. Careful, this is a destructive update, if you go and .set({name: "Colombia"}) it will make name: "Colombia" the only property inside that Document, everything else that was stored there will be gone. If you need to update a property inside the Document use .update() instead.
  • .update() does the same as .set() but in a non-destructive way, meaning that .update({name: "Colombia"}) will only change the name property, everything else will remain there.
  • .delete(), as you probably imagine, removes the entire document from the Collection.

They all return promises

You heard that right, they all return promises, meaning that you can do one of the operations and tell it that you want to run something else after it is completed.

For example, let’s say you want to remove an item from Firestore, so you open your app, see the list of items, click one of them and it takes you to the item page.

If you are on the item page, you would want to go back to the list page once you delete the current item.

You could accomplish that with something like:

const currentCountry = this.fireStore.doc('/countryList/colombia');
currentCountry.delete().then(deletedCountry => {
  this.navCtrl.pop();
});

That right there goes back one page after successfully removing an item from the database.

If you want a complete guide, make sure to check AngularFire2 Official Documentation.

AngularFirestoreCollection Explained

We learned a bit more about the AngularFirestoreDocument API, and now it is time to talk about lists.

In the other tutorial I mentioned earlier we went over fetching data as lists, so right now we are going to cover two things:

  • Querying data from the database.
  • Performing operations on that data (save, update or delete).

Let’s jump straight into action:

Querying the data:

I know what you are thinking, “Hey Jorge, fetching data is cool and all, but what if I want to filter the data I get from the database?” and yeah, that is very easy too.

All you have to do is perform a query when you are calling the collection reference.

For example, let’s say you want to get only the countries that have a population greater than 50M people. You will want to append a query to the countryList collection:

this.fireStore.collection('countryList', ref =>
  ref.where('population', '>=', '50000000')
);

That query will tell Firestore:

  • I want the countryList collection.
  • Organize it by population.
  • Only give me the ones where population starts at 50,000,000.

If you want a complete list of what kind of filtering methods are available inside the query object you can read the full list in Firebase official documentation

Perform operations with the collections

With the documents we could do several operations, like set, update, and delete.

With Collections we can only do one operation, pushing or adding documents to the collection, for example, let’s say you’re going to add a new country to that countryList collection, it would look like this:

this.fireStore.collection('countryList').add({
    name: 'Colombia',
    population: 50000000,
    ...
});

The other methods don’t really make sense on Collections if you want to update or remove you apply it directly on the documents you want to change.

Same as with documents, the .add() method returns a promise.

Next Steps