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
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.