Route parameters and query parameters

- [Instructor] Routing isn't just about navigating to new pages, it's also about sending information along with the routes. We can do this in two ways, with route and query parameters. Let's start by explaining route parameters. In a courses/:id route, the ID is a placeholder for the actual course ID. In our course detail component, we can use Angular's ActivatedRoute to read this parameter and fetch the corresponding course from the backend. So let's navigate to our CourseDetailComponent. I can leave this one in, but I'll not be leaning on it anymore soon. In our CourseDetailComponent, I'm going to load the course as soon as the component has been initialized. So I'm going to say implements OnInit and then I'm going to specify the ngOnInit method. And in here I'm going to use the route.paramMap.subscribe. And what I'm doing in here is that I'm going to grab the parameter from the route and use it to load my course by ID. You can see that my route has red squigglies, and this is because I need to inject it in my constructor. So I'm going to say private route, which is of type ActivatedRoute. Need to import it as well. As you can see, it has been added. And in here I'm now going to specify that I want the ID. So let's go ahead and say params, make this look pretty. And then let's specify what to do with them. Well, let's first get it. So I'm going to say the ID string is the params.get. And I want to get one that's for ID. And that has to match the parts in the routes. Then I'm going to say, well if that is there, then let's convert it to a number, because we need it to be a number, and I can do that and like this. And then I'm going to say, this.loadCourseById and pass in the id. Well that means I'm actually ready to show it, but before I do, I want to get rid of this button because now I no longer need it and I might as well get rid of that horizontal line too. So here's our Angular application. And I can click on course details and you can see it still navigates to courses/1. I did not touch that, but it loads the course with ID one by default. And if I switch this to two, I get the course with ID two. And if I switch it to three, well guess what? I get one with ID three. If I switch it to something that doesn't exist, I simply get a blank page 'cause I'm only learning it when I have a course available. So what would be nice is to add a button on the course card to see the details. So let's go ahead and add the button first. When the button is clicked, I want to trigger a method, goToDetails. I still need to implement this method, but I'll do that soon. And let's put See details on the button. And let's copy this and go to our TypeScript file and add this method. So this is going to accept a courseId, which is a number. It's not returning anything, but it is actually kicking off something that we have not seen yet. I want to use the router to navigate to that page. And in order to be able to do that, you might have guessed it, I need to inject it. Router, it's going to be of type router, which I need to import, the import has been added. And I can now go ahead and use it here like this, this.router.navigate. And then I can specify the details of what I want to navigate to. First, I want to navigate to the /courses URL and I want to pass along the courseId. So let's go to our courses and see if this works. So I'm going to click and See details of RxJS fundamentals. And as you can see, it's bringing me to the correct URL. It's working. So that's a story about the route parameters, but we also have query parameters. Query parameters let us send extra information that can be used for filtering or additional logic. For example, you might have route look like /courses?description=frontend to filter the courses by a keyword. What we won't go deep into the querying here. It's good to know that Angular supports this out of the box. Let's add a little bit to the CoursesListComponent to demonstrate this. So I'm going to be adding a filter on the description. And in order to be able to do that, I need to add a little bit of code here. So first of all, I need to inject the ActivatedRoute here too, along with the router. So I'm going to rewrite this a little bit. Instead of having this in the ngOnInit, I want to go ahead and modify my getCourses to accept a description. So let's start by modifying our service. Instead of getCourses, I'm going to add a optional description. It can also be, no, that's fine too. (keyboard clicks) And I'm going to change this code a little bit. Why? Well, I want to set the base here, the base for this one, to our current base URL: /courses. And then if there's a description specified, I want to append that to my URL and then I'm going to get the courses with that URL. This will not work out of the box for any backends. And as you can see, ours is not up for this either. So I will add the code to make this possible. So again, checking here if there's description. You don't need to know the node.js, just realize this one gets the job done. And because I changed my node.js I will have to restart it. So I type Control + C and then arrow up and run it again. Okay, that is ready. Let's now go back to our course service, which we'll now actually be able to call this endpoint and it's wired to do what we hope it's doing. Namely, return the courses filtered by the description. Okay, that's it for the surface side. Let's go back to our CoursesListComponent. I'm actually going to take this code out and place it in a separate method, otherwise it gets a bit too lengthy. So I'm also going to specify the description here saying it's either a string or it's null. Then I'm going to pass the description in here and then this is good. Let's go ahead and fix the ngOnInit. Here, it's where I'm using the injected route. So I'm saying this.route, and this is special, I'm using the query parameter map, which is holding all the query parameters. And I'm saying you're subscribed because that also returns an observable. I'm saying params. What am I going to do? Well, I'm going to create a constant description and I'm going to set that to be the equal of params.get, and then the value for description. And then I'm going to call my loadCourses. All this is happening in the subscribe, it's very important to realize, with this description. And then my loadCourses is actually going to load courses. So let's go ahead and test this query parameter. So if I go to my courses, I get to see all the courses. If I'm going to change the URL to hold a query parameter for the description and I'm going to make it description=data, I will only get the RxJS Fundamentals because that one equals data. Clearly, filtering by using the URL is not a very user-friendly process. You can also navigate this programmatically. And that's it, you're ready to get going with navigation now. Let's put it to the test with this chapter's challenge.