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
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
Angular 17 router.navigate
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.