The Angular 7/8 Router: Using RouterLink, Navigate or NavigateByUrl

In the previous tutorial of the Angular 8 Router, we've seen how to use basic routing between components then how to handle route parameters using different methods. We've also seen how to use the RouterLink directive to create route links. This tutorial continues from the previous tutorials with other methods to implement navigation.

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/',]"></a>

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

The Angular 8 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 modify our previous demo application to navigate using one of these methods. Go ahead and 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";

  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 they 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',">Go To Details</button>

This is the whole template:

<h1>Products List</h1>

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


In this tutorial, we've seen different methods to implement navigation with the Angular 8 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. You can find the complete code for the Angular Router tutorials in this repository.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status