In this lecture, we are going to retrieve the data outside of the outlet.
As we've learned, Angular doesn't make it easy to grab this information.
One trick to get the data is through angular events.
In the authentication service, we're filtering the events emitted by the router to the navigation and
event.
The next step is to start grabbing the data in the pipeline.
We will add the map.
Operator.
In this map.
Operator, We will add an arrow function that accepts the event object.
For this example, it's not notrillionequired to accept the event object.
We're not interested in the event anymore.
We're using the event to wait for the router to finish navigating to a page.
At this point we should be able to grab the data from a route without unexpected behavior from the router.
We are going to return the this dot route dot firstchild property.
We are completely changing the value pushed from the observable.
If you can recall, the root object is an instance of the activated root service.
The activated root service will store information about the current root the user is on from this service.
We are grabbing the first child property.
Initially, the router creates a tree of roots.
It's a representation of the root activated by our app.
We haven't talked about children's roots, but it's possible to create roots from within a root.
As a result, we will get a nested tree of roots.
The activated root service will return the entire tree of Roots.
We're not interested in the entire list of roots by accessing the first child property.
We are accessing the first child in the tree.
The rest of the roots can be ignored.
Let's check out the console in the developer tools.
To our surprise, we will be returned Another instance of the activated root object.
The Tree of Roots I mentioned earlier is a tree of activated root objects.
If we look inside this object, we will find the data observable.
Unlike before, this observable will contain the data from the root.
We can subscribe to this observable to gather the data related to a root.
Let's head back to the editor.
We are already in a pipeline.
We need to subscribe to an observable from within an observable.
Luckily we have the knowledge to solve this problem.
There are a set of operators for subscribing to an inner observable.
I think the switchmap operator will be perfect for this scenario.
As a refresher, the Switchmap operator will subscribe to an observable.
Its value will be pushed onto the next operator or subscription if a new value is pushed into the switchmap
operator, the previous observable will be completed.
Lastly, it will subscribe to the new observable.
Therefore, we will never have more than one inner subscription at a time.
At the top of the file, import the Switchmap operator from the Rxjs slash operators package.
Back in the pipe function, we will add the switch map.
Operator.
Next we will pass in an arrow function that accepts the route object.
Lastly, we will return the route data observable.
TypeScript will throw an error at us to understand why.
Let's hover our mouse over the first child property, according to the editor.
This property will hold an activated route object or null.
TypeScript is throwing an error because we will not be able to access the data observable on a null
value.
We can avoid this error by adding the optional chain operator after the route object.
However, this will not solve all our issues.
It is possible we may receive a null value if that's the case.
The Switchmap operator will throw an error.
This can break our app.
To avoid this issue, we should return a fallback observable after the return value.
We will add the nullish coalescing operator.
The knowledge Coalescing operator is a new feature in JavaScript.
Recently, Angular added support for this operator.
This operator will check if the value on the left is null or undefined.
If the value is not empty, the operator will return the value.
Otherwise it will return the value to the right of the operator on the right side of the operator.
We will return the of operator with an object.
The of operator will create a new observable.
It will push the value we pass into it.
In this example, we are creating an observable that pushes an empty object.
Let's update this object to contain the auth only property with a value of false.
We will assume that data from the root is empty.
This operator needs to be imported at the top of the file.
Import the of operator from the rxjs package.
Let's give our app a test.
If we navigate from page to page, the data object gets logged on the manage page, the auth only property
will appear.
Awesome.
It's exactly what we wanted.
It was a lot of work to get to this value, but we can finally redirect the user if they're on a page
that requires authentication.
Let's go back to the editor.
At the top of the class, we will define a property called redirect with an initial value of false.
We are going to keep track of routes, data from within the service.
Next, let's go back to the route events observable inside the subscribe function.
We will replace the console dot log function with an arrow function that accepts the data argument.
Inside this function, we will set the redirect property to the data dot auth only property.
It's possible this value may be null or undefined.
If that's the case, we will add the nullish coalescing operator.
The value will be false if we can't retrieve the data.
The last step is to update the log out function in the service.
We will wrap the navigate by URL function with a conditional statement.
We will check if the redirect property is truthy.
Time to test our app, refresh the page in the browser.
I'm going to log out from the about page.
As I do so I'm not redirected to the home page.
It's the behavior we were looking for.
I will log in again.
This time I'm on the manage page.
If I were to log out, I'm redirected to the home page.
We're finally finished with redirecting the user.
We've refined the log out behavior by adding data to a route.
In the next lecture, we will continue learning about the router.
I'll see you there.