The Router service allows you to navigate to a specific route or trigger route changes based on application logic or user interactions.

navigate() Method

Using navigate() method, we can navigate from one route to another programmatically. The navigate method takes an array as an argument and in that array we can specify route segments.

Let's say, we want to navigate the user to following route:

URL: localhost:4200/Movies/Action/107

We can pass each segment of the above URL as an element of the passed array to navigate method.

this.router.navigate(['Movies', ‘Action’, 107]);

Syntax:

navigate(commands: any[], extras?: NavigationExtras): Promise<boolean>;

• commands: An Array representing the route segments of the target route.
• extras (optional): Additional options for navigation, such as query parameters, fragment identifiers, or navigation behavior.

Procedure

#1 Import Router Service:

First, import the Router service from @angular/router into the component or service where you want to perform navigation.

import { Router } from '@angular/router';

#2 Inject Router Service:

Next, inject the Router service into the constructor of your component or service using Angular's dependency injection mechanism.

constructor(private router: Router) { }

#3 Perform Navigation:

You can navigate to a specific route by calling the navigate() method of the Router service and passing the route path or an array of route segments as an argument.

navigateToHome(): void {
  this.router.navigate(['/home']);
}

you can also pass additional options such as query parameters or fragment identifiers along with the route path.

navigateToProduct(productId: number): void {
  this.router.navigate(['/product', productId], { queryParams: { category: 'electronics' } });
}

Usage Examples

1 Basic Navigation:

import { Router } from '@angular/router';

constructor(private router: Router) { }

navigateToDetails(): void {
  this.router.navigate(['details']);
}

In this example, navigateToDetails() triggers navigation to the details route when called.

2 Navigation with Route Parameters:

navigateToProduct(productId: number): void {
  this.router.navigate(['product', productId]);
}

Here, the navigateToProduct() method navigates to the 'product' route with the specified productId parameter.

3 Relative Navigation:

navigateToParent(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

This example demonstrates navigating relative to the current route by using ../ as the target route segment.

navigateByUrl() Method

Using navigateByUrl() method, we can navigate from one route to another programmatically. The navigateByUrl method takes a string value as an argument and that string value should contain all the route segments.

Let's say, we want to navigate the user to following route:

URL: localhost:4200/Movies/Action/107

We can pass each segment of above URL as an element of the passed array to navigate method.

this.router.navigateByUrl('Movies/Action/107');