7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.3 Using Router Links for Navigation

In this lesson you'll learn how to add router links in our component templates. These will allow users to navigate around our application using regular anchors.

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.3 Using Router Links for Navigation

Hi folks, in this lesson, we're going to look at router links, which are anchor tags in our template that users will click on to navigate around our application. They're very commonly used, so it's vital to have a good understanding of how to use them. We know at this point that we can enter different URLs into the address bar in order to render different components into the view. But we cannot expect our users to know which URLs they will need to enter into the address bar in order to navigate to the different parts of the application. They should be able to navigate using the UI of the application rather than the browser's address bar. And this is the primary purpose of router links. Let's see how they can be used. We going to add a new component to the application, called help, which will contain some instructions for the game. We can use the CLI to generate this component. And let's import this new component now into our routes file. And now we can add a new route for the component. So this should go above the empty and wild card routes That's actually all we need to do. Once routing is set up, it's incredibly easy to add new routes. I've already got the content and styling for this component ready in a text file on my desktop. So I'm not gonna make you sit there and watch me type out a bunch of paragraphs of text or anything, don't worry. All right, so lets just go back to the browser and test out the route and make sure that everything is working. And we can see that it is. So now let's add a router link to the header in the home component which can be used to navigate to the help page. A router link is just a regular link that uses a router link directive. This directive comes to us from the routing module, so we don't have to import anything extra to use it. We can just add it to the template and it should work as expected immediately. So we can see that this help link has been added. Let's just go back to the home page and if we click on the Help link then we get taken to the help route. So the value that we give to this directive, Is the route that we would like to navigate to when the anchor is clicked. So let's just tidy things up with a little styling for the link in the home component. There's not much so I'm just gonna add that now. And I've added that to the wrong place, so I'm just gonna copy all of that and that should actually go into the home component, not the help component. And that just tidies the link up slightly. So another routing feature that we can make use of is the router link active directive, which allows us to specify a class name that should be added to the anchor whenever the route that the anchor links to is active. So the directive is called routerLinkActive, and we just provide that with the class name that we would like applied when the route is active. And in this case, the class name is also active. So let's just go back to the browser now. And we can see already that we are on the help route, so the help component is active and we get the active styling with a little line above the Help anchor here. And let's just go back to the start page, and we can see that the help link no longer has the active styling. This is another very useful, very commonly used feature of routing. So in this lesson, we've learned how we can use regular anchor tags to hook into our applications routing to allow users to navigate around our application. We saw that we used the routerLink directive to tell Angular which route the link should never go to. And that we can use the routerLinkActive directive to add a class name with active to any link whose route is currently loaded in a router outlet. Thanks for watching

Back to the top