Add a New Document to a Collection in Firestore from Angular with Firestore addDoc
We have a new task form but currently it doesn't do anything. In this lesson we'll implement the save button that will add the task to Firebase.
First, we'll create a reference to our tasks collection in Firestore, and then push a new document to that collection with the addDoc function Firestore provides us.
After the document is in the database, we'll use the updateDoc function to edit that document and add the document's ID as a property on the document.
Instructor: [0:01] When the user clicks this button, we want them to call the saveTask function. Since that function doesn't exist in our class, let's create it right now.
[0:15] Here, we want to do a couple of things. First, we are going to get the value of the task. Since right now, I am using a behavior subject, I can do that with this.task, and here I can get the value property.
[0:34] Then, I want to save this task to the database. For that, there are a couple of things that I need to do. First, I want to import Firestore into our class and then I need to inject it into the constructor.
[0:53] Now, to save the actual object to Firestore, I first need to create a reference to the tasks collection in our database, where I can import collection from AngularFire Firestore.
[1:09] Collection takes two parameters. The first one is the instance of Firestore I am using and we get that with this.Firestore. The second one is the path to the collection.
[1:21] Since this is our root-level collection called tasks, that is what I am going to add here. Once I have the reference to the collection, I am going to create a reference to my task.
[1:31] I am going to save this task to the database using the function addDoc. I can also import this one from Firestore. addDoc takes two parameters.
[1:47] First, the reference to the collection that you saw we created right before, and then the object I am going to save into the database. In our case, we are going to save this task object that we have right here.
[2:05] The addDoc function adds a new document to our collection. When adding the document, it uses a Firestore functionality to create the document's ID.
[2:16] We don't have that ID here at the moment. It's not saved inside the document. I prefer to store the ID also inside of the document itself because that makes it easier sometimes to work with.
[2:30] For that, once I have this task reference, I am going to use another Firebase function called updateDoc to update in the database the document that I just created.
[2:45] This one takes a couple of parameters. The first one is the reference of the task that I am creating, and we have it right here with task reference.
[2:56] Then, it takes the property that I am going to update, and the new value for that property. We can get the ID from task reference itself.
[3:08] Now, to test that this is working, we are going to go to our console. We are going to open our Firebase application, and we are going to look for our Firestore database.
[3:21] Here, we see that we have two documents. Those are the two tasks that we are rendering in the application at the moment. We are going to create a new task here, and we are going to click save task.
[3:40] Once I do that, I am going to go back to the Firebase console. You see that now, I have another task right here that this is my task title, this is the test description, and you see that this is the ID that it generated for the document.
[3:59] Here, we are saving that ID inside of the document itself.