1import {Router} from '@angular/router'; // import router from angular router
2
3export class Component{ // Example component..
4 constructor(private route:Router){}
5
6 go(){
7 this.route.navigate(['/page']); // navigate to other page
8 }
9}
1const routes: Routes = [
2 { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
3 { path: 'first-component', component: FirstComponent },
4 { path: 'second-component', component: SecondComponent },
5 { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page
6];
1First you need to make component using 'ng generate'
2$ ng generate component home
3$ ng generate component about
4
5Next, in the src/app/app-routing.module.ts file import the components as follows:
6
7import { NgModule } from '@angular/core';
8import { Routes, RouterModule } from '@angular/router';
9
10import { HomeComponent } from './home/home.component';
11import { AboutComponent } from './about/about.component';
12Next, add the routes as follows:
13
14const routes: Routes = [
15 { path: 'home', component: HomeComponent },
16 { path: 'about', component: AboutComponent }
17
18];
19So now if you visit the /home path you should go to home component and if you visit the /about path you should go to the about component.
20/*
21I hope it will help you.
22Namaste
23Stay Home Stay Safe
24*/
1// Here’s a basic example using the navigate method:
2
3goPlaces() {
4 this.router.navigate(['/', 'page-name']);
5}
6
7/*
8I hope it will help you.
9Namaste
10*/
1import { NgModule } from '@angular/core';
2import { RouterModule, Routes } from '@angular/router';
3import { HeroesComponent } from './heroes/heroes.component';
4
5const routes: Routes = [
6 { path: 'heroes', component: HeroesComponent }
7];
8
9@NgModule({
10 imports: [RouterModule.forRoot(routes)],
11 exports: [RouterModule]
12})
13export class AppRoutingModule { }
14
1
2 content_copy
3
4 goToItems() {
5 this.router.navigate(['items'], { relativeTo: this.route });
6}
7