6.4 Navigating Routes Using the Router

Hi, folks. In this lesson, we're going to take a look at how we can navigate routes programmatically using Angular's router. We've seen how we can add router links to a template to allow users to navigate to different parts of an application by clicking. But there are times that we will want to change the route ourselves in order to change which component is rendered into a router outlet. So previously we refactored our home component and moved player creation into a player service, this was a useful first step. Up until now, we've been relying on signal between the start component and the home component using a custom event called start, which the home component has an event handler for called start game. Unfortunately we can't use custom events to signal between components that are routed, but it doesn't matter too much now that we have our player service. So the first thing that we want to do is import this new PlayerService into the start component. And now we can inject the service into our constructor. Inside the class we have a start game method here, and that is how we were emitting the start event in order to start the game. So we can keep the if statement and let's comment out the part where we omit the event. Instead, we can create the human player there. Great. So this takes care of the human player, and the dealer player was already created in the initialization of the home component. We still got some loose ends to tie up, but now let's see how we can use Angular's router to navigate to the game component. We'll need to import the router, first of all. And we can inject this into the constructor also. So we can make this one private as well because we won't be needing it in the template or outside of this component at all. So there's a couple of other things that we can tidy up here quickly. We don't need the event emitter or the output tokens that we imported and we also won't be using the inputs, so let's get rid of all of those. Okay, great. So now once the human player has been created, we can navigate to the game components using the router that we injected. We use the navigate method of the router to instruct the router to navigate to a new route. This method should be passed an array containing one or more items which are the individual commands needed to hit the routes. In this case, we only need a single command which is the path of the route that we want to navigate to. When the first command starts with a forward slash, like this one does, the route is absolute, which is fine for our requirements here. Routes can also be relative. But in this case, we would need to add additional configuration to the method by passing an object to the navigate method as the second argument. But we're not gonna do that because we don't need to. So now let's check things out in the browser. So we should find that we still can't start a game if we haven't entered a name, and the validation still works, excellent. But now when we do enter a name and hit the start button, they may get redirected to the game components. Now we do see an error here because it still can't read the hand property of undefined. Because even though we now have a human player, we're not doing anything with it in the game component. So let's fix that quickly. We need to import the player service here. We won't need the inputs. So instead of having an input property equal player, let's change that to have a regular public property equal player. This means that we won't need to make any changes to the template, and we'll also need to inject the player service into the constructor. And we won't be needing the easy mode definition here. And in the NG on in its method, instead of just logging the player to the console, let's extract the second player from the players array in the players service and set that to the public player property. So now let's go back to the browser. And let's go back to the start component and let's enter a name, and now let's start a game. Awesome! So we still didn't see any cards on the screen yet ,we need to do some more work to get that happening, but at least the error has gone away, things are now starting to hang together. So in this lesson, we saw how we can use the navigate method of the router to programmatically navigate to a new route. We saw that we can pass an array of commands for the navigation. And we also learned that if we need to configure the navigation further, like if we want to use relative routine perhaps, we can pass an object as the second argument to the navigate method. Thanks for watching.