Angular 17 router.navigate

The router.navigate method in Angular 17 is used to navigate to a specific route programmatically. It allows you to change the browser URL and load the corresponding component without the need for a traditional link or reload. This is particularly useful when you want to navigate based on user interactions or application logic.

Prerequisites

• Angular Routing
• Angular Dependency Injection

The router.navigate method is part of the Router service provided by Angular's routing module. It accepts an array of commands that represent the path to navigate to, along with optional parameters and options.

Features of router.navigate

• Dynamic Navigation: The router.navigate method allows you to navigate to different routes based on application logic or user interactions, providing a seamless and dynamic user experience.
• Route Parameters: You can pass route parameters as part of the navigation commands, enabling you to navigate to routes with dynamic data.
• Navigation Options: Angular's routing module provides various options to customize the navigation behaviour, such as replacing the current navigation entry in the browser history or triggering navigation imperatively.

Steps to implement router.navigate

Follow these steps to create a new Angular application and explore the router.navigate method

Step 1: Create a new Angular application:

Use the Angular CLI to generate a new project by running

ng new my-app

Step 2: Create a new component

ng generate component about

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.3",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example

<!-- about.component.html -->

<div>
    <h2>About</h2>
    <p>This is the about page.</p>
</div>

// app.routes.ts

import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [{
    path: "about",
    component: AboutComponent
}];

//app.component.ts

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
    template: `
    <div>
      <h1>My App</h1>
      <nav>
        <button (click)="navigateToAbout()">Go to About</button>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {
    constructor(private router: Router) { }

    navigateToAbout() {
        this.router.navigate(['/about']);
    }
}

Explanation

• We import the Router service from @angular/router.
• We inject the Router service using the inject utility function.
• We define a navigateToAbout method that uses the router.navigate method to navigate to the /about path.
• We added the <router-outlet> element to the AppComponent template. This is where the routed components (AboutComponent in this case) will be rendered when the corresponding route is matched.

Output