FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.4 Navigating Routes Using the Router

In this lesson, you'll see how we can use Angular's Router to programmatically navigate between different states in our application, rather than waiting for users to use a routerLink anchor.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


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.

Back to the top