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.5 Determining the Active Route Using an Activated Route

In this lesson you'll learn how to tell which route is activated when we are inside a component. This is useful if we need to know which components are rendered to the screen.

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.5 Determining the Active Route Using an Activated Route

Hi folks, in this lesson we're going to learn how we can determine which route is active when we're inside a different component. For example, a child component which might be in the template for more than one routed component. In this scenario, how will we know which component is rendered in the route outlet? Angular provides the activated route class for exactly this kind of thing. And provides extensive access to the current routes, as well as a host of other information. In the example app, we do have such a child component, which is rendered into more than one routed component. This is the controls component. Which is part of the template for both the start and end components. In the controls component, we will want to show or hide different bonds depending on whether the game or end component is active. We can use activated root in the controls component to determine that. We haven't done much at all with this component yet, so it's pretty bare inside. Let's import activated route and the ng, on any interface first of all. Then we can add on in it as an interface which this class implements. Great, so to control which buttons are visible, we can add some properties to the components. So we've added four properties, one for each button. So now let's add some ngIf bindings in the template for this component. So now, let's go back to the class for this component. One more thing that we need to do actually before we can use the routes is to inject the activated route into the constructor. So now we should be able to access just the routes, so let's log that to the console and see what it contains. And let's go to the browser now. So we see nothing in the console at this point, because this doesn't have the controls component inside it. But as soon as we hit one of the components that does contain the controls component, we see this activated route object in the console. And has a number of different properties, and several interesting ones actually are URL and snapshots. So we'll learn a bit more about this in just a moment. One thing is that the buttons are all disabled at this point. And they're not present in the control at all because of the ngIf bindings that we just added. So take if the current path of the root which will reveal which component is active, we can use the URL property of the activated root. The URL property contains an observable that we can subscribe to. The arrow function will be past a URL segment, which is an array containing different components of the URL. In this case it contains just the single objects as there is only a single part of the route which is the path. We can use a switch statement to show the appropriate buttons depending on that route. We can switch on the path name of the first item in the URL segment array. So now let's go back to the browser again. And let's close the console. So let's start again And we find we have the Stick and Hit me!, buttons. Using the observable in the URL proxy is one way to handle this, but in some cases it may be overkill. Like, in our case, we don't need to subscribe to URL changes, because the URL won't change until the game ends. And at that point a new instance at the controls component will be loaded. Plus we should really handle the subscription carefully and dispose of it once we're done. So instead, there's another property of the activated route the we can use called snapshot. Which is a single static snapshot of the route and any data or route parameters or anything else like that. It should be perfect for our requirements so let's use that instead. So we don't need to subscribe anymore. And we just need to switch on a different part of the route now. So we're still looking at the path property of a URL segment, but this time it's a static segment. Now it does mean that we have to reach quite deeply into the complex nested structure of the route objects. But I think in this case, given that it means our component can be much simpler, I think that's an acceptable trade-off. So let's just go back to the browser, And it looks like everything is working as before. So in this lesson, we saw a couple of different techniques that we can use to determine the currently activated route. And we saw that there was also a lot of other information about the route that we can get a hold of if we need to. We saw how to subscribe to changes in the URL so that we can determine what the new URL is when any part of it changes by subscribing to the URL observable. Or we saw that if this a little overkill, like it would be for us, we can use the static snapshot of the route instead. Which also contains a lot of information about the routes, but won't notify us in case any aspect of it changes. Thanks for watching

Back to the top