Angular Router featured image

Navigation with RouterLink, Navigate, and NavigateByUrl in Angular Router


Angular applications are very common these days. They are built with the concept of Single Page Applications (SPA). In such applications, routing across the web pages is different from traditional websites since components are used. In Angular, you need to use RouterLink for navigation to route across the application. RouterLink is a directive, and it provides Router.navigate and Router.navigateByURL methods to navigate across the component classes.

In this tutorial, we will be looking at RouterLink, Router.navigate, and Router.navigateByURL along with code examples.


In HTML a link is normally inserted using an anchor tag <a> like below:

This example link will navigate the user to the /sample page. However, as mentioned above, a Single-Page application (SPA) does not have different pages to link to. Instead, it has different views or components to display to the user.

If you need to allow a user to navigate and change the view, you will have to use the RouterLink directive instead of href:

This RouterLink example will lead the user to the component at /users/example. The different URL segments can also be passed in an array as in the following example:

These two examples are formatted in a different way, but will still be directed to the same component at /users/example.

  • Relative Path

The RouterLink allows specifying the relative URLs. We can use ../ to go up to the higher levels of navigation. Below is how we can achieve this:

In the example above, if the user is at /users/posts, the navigation will take the user to /posts/parent. You can also specify the URLs relatively using ./, ../, or even no leading slash if needed.

  • Parameters

There might be scenarios where you need to pass the data between the routes. A simple example is when the user fills in the form and you take him to the next part of the form for further details.

To pass in the parameters, an object encapsulating the data is passed in the list of URL segments:

Above, the Router will navigate to /users;display=sample/xyz.

  • Named Outlets

The named router outlets are simply router outlets with names. Let us look at the code for this:

In that example, the xyz segment will be placed in the outlet named side. We can also specify multiple named outlets like below:

This will replace the first segment with abc and the second segment is replaced with xyz.


In Angular, the Router class is used to define the routes and to navigate across them. This is achieved by two methods: Router.navigate and Router.navigateByUrl. Both of these methods return a promise. This promise can have three values: true, false, or null.

  • The value is true when the navigation is successful.

  • The value is null when there is no navigation.

  • And false if for some reason the navigation fails.

If you want to have these methods available in your application, you first need to import the Router class in your component class:

Next, you need to inject this Router in the constructor to the dependencies:

With this setup, you are ready to use Router.navigate and Router.navigateByUrl methods in your application.


The Router.navigate method accepts an array of URL segments. Let’s look at a basic example of a Router.navigate code:


Finally, let’s look at Router.navigateByUrl. This method is similar to Router.navigate but instead of accepting URL segments, it accepts a string that specifies the URL. This navigation needs to be absolute and must have / in its start:

The above code will navigate the user to /users;all=true page.


In this tutorial, we looked at how to navigate Angular apps using RouterLink. Routing in Angular apps is a bit different than traditional web applications because of being Single-Paged. Knowing RouterLink and its functions can help developers build robust routing.

Angular apps use Node.js as their runtime. If you want to learn more about Node.js and how to deploy Node.js applications, you can take a look at the following tutorials:

Happy Computing!