In this lecture, we are going to redirect the user programmatically, in some cases, we may need to
redirect the user after our app has performed an action, for example, a user may need to be redirected
after logging out if they're on a page that requires authentication.
We shouldn't trust the user to navigate to a different page.
We can force redirection by injecting the router.
In the resource section of this lecture, I provide a link to a class called router.
This class can be injected into our app after we've imported the router module.
We can interact with the router by calling the methods provided by this class on the sidebar.
We will find a list of methods defined in this class.
The method we're interested in is called navigate by URL.
It's the simplest method at our disposal for redirecting a user according to the documentation.
There are two parameters.
The first parameter is the path to redirect the user to.
The second parameter is an optional object of additional settings.
The value returned by this method is a promise that resolve to a Boolean value, and it's always considered
good practice to consult the documentation whenever we're learning a new method.
We don't want to overlook any piece of critical information.
Let's give it a try.
Open the navigation component class file.
Inside this class, we are going to inject B router class at the top of the file import, the router
class from the angular slash router package.
Next, in the constructor function, inject the router class with the name router.
Lastly, let's update the log out method, this method is responsible for logging the user out of the
application.
We will redirect the user after they've successfully logged out at the end of the method.
We will call the this doc router DOT navigate by URL function with the await keyword.
Keep in mind, the documentation stated, this method returns a promise.
We should add the await keyword to wait for the value to resolve.
Next, we need to pass in an absolute path.
Understanding the differences between absolute and relative paths is key to understanding the behavior
of a router, the router can be configured to work with absolute or relative paths.
But what are the differences?
Let's say we had a path called some slash path.
We may want to redirect the user to a path called example.
An absolute path will redirect the user to the new path relative to the base path of our app.
In our case, the base path is a forward slash.
Therefore, the user will be redirected to the slash example.
It doesn't matter how deeply nested we are in the URL, the new path will always be appended to the
base path.
On the other hand, a relative path gets appended to the current route.
As a result, the new path will be some slash path slash example.
A completely different path gets produced.
Relative paths can be tricky because the new path may be unpredictable.
However, they may be what you're looking for in some situations, in my opinion.
Absolute paths are easier to write.
However, we will be looking at some examples of when you may want to use relative paths over absolute
paths.
Relative paths will not work with this method.
It's possible to navigate with relative paths, but we will explore other options in another lecture.
Let's redirect the user to the home page by passing in a forward slash character.
We aren't going to pass that an object for the second argument.
We don't need to configure the behavior of the method.
Let's give our method a test in the browser.
Make sure you're logged into the app.
Next, let's navigate to the Manage page before pressing the log out button.
Almost immediately after pressing the log out link, we are redirected to the home page.
We've achieved the behavior we wanted in the next lecture.
We are going to improve this behavior by checking the page before redirecting the user.