Navigate Users to a Tasks Detail Page and Load Task via Route Param
We'll navigate our users to a task's detail page. To do so we want to reuse the task page that we built for creating new tasks. The difference here is we'll check the route if it includes a task Id, if it does we will grab that task from our database.
To do this we will use Angular's ActivatedRoute class in the ngOnInit lifecycle method to decide when to show the form for creating a new task, and when to populate it with an existing task's data.
Firebase gives us a handy docData function that we can access the task data via the id and subscribe to it.
Man 1: [0:00] We want our users to be able to navigate to the tasks that they have already created here, in case they want to review or edit. For that, we are going to go back to our tasks page. Here we are going to add some navigation. When the user clicks this item, I want them to go to task. Then I'm going to send here the task ID.
[0:29] Now, when I click one of these tasks, you see that it takes me to the new task page. We are going to take advantage of this page right here since creating a new task, and editing an existing task should use basically the same form.
[0:46] For that, we are going to add in our class one of Angular's lifecycle hooks on init. If you look at the URL of our application, you see that we have tasks and the task ID. When we have here a new page, we have tasks/new.
[1:07] What we want to do right now is to read this URL and whenever the user has the new ID, we are going to keep as is and we are going to show the new task form. If the user has a specific task ID here, we want to fetch that task from the database and show it here to the user. For that, Angular provides us a class called activated route.
[1:35] Here, I can get the route params. This is an observable so I'm going to pipe into the params and I'm going to extract the task ID param from here. Once I have that ID, I'm going to use that ID to get the task from Firestore. To do that, AngularFirebase has a handy method called docData.
[2:04] DocData returns an observable with the document that you're fetching from the database and as a parameter, it takes a reference to that document. Instead of creating the reference first, we can create it here inside of docData.
[2:22] For that, we use doc to create the reference and doc takes two parameters. The far base instance that we are using and the path to the task. Then if I subscribe to this, I can go to my task behavior subject and I can send this task as its next value.
[2:55] It's giving me an error here because AngularFire returns types of document data instead of the actual type of the object that's inside. I'm going to do another transformation here and I'm going to just cast my new task as an object of type task.
[3:16] Now, when I save everything and reload the page, you can see that I have another task here and all of the data is selected. If I go back to my tasks page, you see that I have the list of tasks. If I go into another task like for example MapOutOutflow, I am going to see this task here from the database.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!