Introduction
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.
RouterLink
In HTML a link is normally inserted using an anchor tag <a> like below:
|
1 2 3 |
<a href="/sample"> Example HTML link. </a> |
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:
|
1 2 3 |
<a routerLink="/users/example"> Link that uses a string. </a> |
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:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> An example of a link with an array. </a> |
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:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Link that goes up a level. </a> |
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:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Link with parameter. </a> |
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:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Link with a side outlet. </a> |
In that example, the xyz segment will be placed in the outlet named side. We can also specify multiple named outlets like below:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Link with the first and second outlets. </a> |
This will replace the first segment with abc and the second segment is replaced with xyz.
Router
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:
|
1 |
import { Router } from '@angular/router'; |
Next, you need to inject this Router in the constructor to the dependencies:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
With this setup, you are ready to use Router.navigate and Router.navigateByUrl methods in your application.
Router.navigate
The Router.navigate method accepts an array of URL segments. Let’s look at a basic example of a Router.navigate code:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
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:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
The above code will navigate the user to /users;all=true page.
Conclusion
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:
- How to install Node.js on Ubuntu 18.04
- Setting up Node.js Applications: How to Perform Production Tasks on Ubuntu 20.04 with Node.js
- How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04
Happy Computing!
- How To Enable, Create and Use the .htaccess File: A Tutorial - March 8, 2023
- An Overview of Queries in MySQL - October 28, 2022
- Introduction to Cookies: Understanding and Working with JavaScript Cookies - October 25, 2022
- An Overview of Data Types in Ruby - October 24, 2022
- The Architecture of Iptables and Netfilter - October 10, 2022