The Angular 12 RouterLink, Navigate and NavigateByUrl

In the previous sections, we’ve seen how to use basic routing between components and how to handle route parameters using different methods. We’ve also seen how to use the RouterLink directive to create route links. This section continues from the previous section with the other methods to implement navigation.

RouterLink Example with Angular 12

Let’s give a second look at how we used the RouterLink directive in the previous tutorial(s).

We created basic links using:

<a routerLink="/">Go To Home</a>

Or also:

<a [routerLink]="'/'">Go To Home</a>

We then created a link with a parameter using:

<a [routerLink]="['/product/',product.id]"></a>

Navigating Programatically Using Angular 12 Router.navigate() and Router.navigateByUrl()

The Angular 12 Router provides two methods that you can use to navigate to other components in your component class instead of using the RouterLink directive in the template. The two methods are navigate() and navigateByUrl() and they can be useful in multiple situations where you need to trigger navigation via code. They return a promise that resolves to true or false.

navigateByUrl() takes a string as a parameter. navigate() takes an array of URL segments.

So let’s change our previous Angular application to navigate using one of these methods. Open src/app/product-list/product-list.component.ts then first import and inject the Router class:

import { Component } from "@angular/core";
import { Product } from "../models/product";
import { Router } from "@angular/router";
@Component({
  selector: "product-list",
  templateUrl: "product-list.component.html"
})
export class ProductListComponent {
  public products: Product[] = [
    new Product(1, "Product 001"),
    new Product(2, "Product 002"),
    new Product(3, "Product 003"),
    new Product(4, "Product 004"),
    new Product(5, "Product 005"),
    new Product(6, "Product 006"),
    new Product(7, "Product 007"),
    new Product(8, "Product 008")
  ];
constructor(private router: Router){}
}

Next, add the gotoProductDetails() method which takes an URL and id parameters which are passed as an array of segments to the navigate() method:

public gotoProductDetails(url, id) {
    this.router.navigate([url, id]).then( (e) => {
      if (e) {
        console.log("Navigation is successful!");
      } else {
        console.log("Navigation has failed!");
      }
    });
}

You can also build a string from these parameters and use navigateByUrl():

public gotoProductDetailsV2(url, id) {
var myurl = `${url}/${id}`;
    this.router.navigateByUrl(myurl).then(e => {
      if (e) {
        console.log("Navigation is successful!");
      } else {
        console.log("Navigation has failed!");
      }
    });
  }

Next, open the component template in src/app/product-list/product-list.html then add a button and bind its click action to one of the previous methods:

<button (click)="gotoProductDetails('/product',product.id)">Go To Details</button>

This is the whole template:

<h1>Products List</h1>
<ul>
    <li *ngFor="let product of products">
        <a [routerLink]="['/product/',product.id]"></a> <button (click)="gotoProductDetails('/product',product.id)">Go To Details</button>
    </li>
</ul>
<a routerLink="/">Go To Home</a>

Wrap-up

In this tutorial, we’ve seen different methods to implement navigation with the Angular 12 Router i.e using the routerLink directive with the anchor tags in components HTML template or using Router.navigate() and Router.navigateByUrl() methods in situations where you want to navigate in the component class.