Notify Users Their Database Operation Worked with a Toast Alert
We'll evaluate 2 good practices when adding a new task.
First, we'll show the users a toast alert to notify them that their document was saved in the database. We'll do this with a toast component that ionic makes available to us
And second, we'll use Angular's router to navigate the user back to the task list.
[0:01] Instructor: Now we need a way to notify our users that the task was indeed created. For that we are going to do two things. First, we are going to display a toast to our user saying that everything worked as expected. Second, we are going to redirect our user to the tasks page.
[0:19] For redirecting our users, I'm going to import here the router from Angular router. For alerting our users, I'm going to use one of Ionic's alerts and it's called the toast controller. We import that one from Ionic Angular.
[0:42] Now that we have them here, I'm going to extract the toast functionality into a helper function. This is going to take a message as a parameter. I'm going to give it a default value of task successfully updated.
[1:02] Here, I'm going to create the toast and I'm going to pass on parameter. First is the message. Second, it asks me for the duration. Let's say this is going to be two and a half seconds. Then is the position. We want to have this at the bottom of the screen. Lastly is the color.
[1:29] I'm using one of Ionic color variables called success. This is like a green color. Then once we successfully update the document, I'm going to call the present toast function.
[1:42] Then I'm going to use the Angular router to navigate back to the tasks page. After creating the toast, I have to actually present it. Now, I can go back to create a new task.
[2:02] When I click save task, now I'm going to get my notification task successfully created. In here, I can see all of the tasks that I have created.