Delete a Document with a Confirmation Step from Firestore
We'll learn how to delete documents from the database. This action is pretty straight forward, we'll add a delete button that will call Firestore deleteDoc and pass in the task id.
We'll also explore a good practice when performing destructive operations (like deleting database objects) of adding a confirmation step to make sure our users don't delete objects by accident. We'll do this with the Ionic Alert Controller.
Man: [0:01] Now we want our users to be able to also delete tasks from the data. For that I'm going to come here into the footer and I'm going to add another button. This is going to be a delete task button. I'm sending the color danger, this being Ionic translate to this red color that you see here.
[0:23] The idea is that when they click it, we are able to delete the task. We're going to add a click handler to our button. This is going to call the deleteTask() function and it's going to send the task id. Now, we're going to create that function here.
[0:45] For deleting a task, AngularFire has a function called deleteDoc(). We can import this one from Firestore. DeleteDoc() takes a reference to the document that you want to delete. As you've seen before, we can create that reference with doc().
[1:02] We pass the Firestore instance that we are using, and we pass the path to the task that we want to delete. Then, after the task is deleted from the database, we want to be able to navigate to the tasks' page.
[1:23] Now, we can test this by clicking delete task. There's one big problem here, and is that, if the user accidentally clicks the delete button, then that's it. That task gets deleted from the database, because if we go back to Firestore, you can see that none of those tasks is here. Those are gone.
[1:49] A good practice to avoid this is to add a confirmation step when you are doing destructible operations, like for example, deleting a document from the database. For that, I am going to use a confirmation alert. Ionic has an alert controller I can use here. Here is what's going to happen.
[2:08] First, I'm going to create my alert, and then, so I don't forget, I'm going to actually present. Now I'm going to add the configuration here. It takes a message, and it takes buttons. For the buttons array, the first one, we are going to create a cancel button. For the second one, we are going to create the delete button.
[2:47] This delete button is going to take the text delete and it's also going to take a handler. When the user clicks on the button, it's going to call this handler. Inside of the handler, we are going to move the delete functionality that we have created.
[3:09] Now, if I save my application here, when I am going to delete a new task, it's going to prompt the alert. Are you sure you want to delete this task? I click cancel, nothing happens. If I go back to my list of tasks, you see that map our float is still here or if I go into the task, click delete task and I click delete, it actually deletes the task.