Fetch a List of Firebase Documents with Firestore collectionData

Jorge Vergara: [0:00] Cloud Firestore is a NoSQL document-oriented database. It has two main types of data and they are documents and collections. Documents are the objects that you store in the database. In this example, we have a list of tasks and each task has its properties. This is a task document.

[0:23] A collection is the name we give to a list of documents. In our case, this is a list of tasks. We are going to pull that list of tasks into our application. For this, we have created a tasks component that's going to have a header. It's is going to have a content area and in that content section it will have a list that will have the tasks.

[0:49] For each task, we are going to show the task title and the task description. Now to get our tasks from Firebase, we are going to go into our class. Here, we are going to create an interface for our task. We'll start with something simple, only the properties that we need right now. The ID, the title and the description.

[1:12] We are going to import Firestore from AngularFire and we are going to inject it into the constructor. Now we are going to create our tasks observable, and this is going to be an observable of an array of tasks.

[1:30] To get our task collection from Firestore, we are going to use the method collectionData. collectionData takes as a parameter, a reference to where it's going to get the data from. We get that by creating a reference to a collection.

[1:50] For that, we use collection. Collection takes two parameters. First is the instance of Firestore. We can get that from this.Firestore. The second parameter it gets is the path to where the data is. In this case is tasks. We can go into the database and you can see that the collection is tasks.

[2:19] I'm getting an error here, because collectionData returns an observable of an array of document data. What I'm going to do is that I'm going to remove this from here, and I'm going to cast this as an observable task instead.

[2:36] Now, we are able to go back into our HTML and we are going to add the ng4 directive here. We are going to save for each task of tasks and we are going to pass the async pipe since this is an observable.

[2:56] In Angular, the async pipe takes care of subscribing and unsubscribing from this observable. If we save it, you see that now we have two tasks here and that's the number of tasks that we have here in the database. We are going to replace this one.

[3:15] We are going to say this is task.title and here, we are going to show task.description. Now, you can see them rendering the page.