angular routes

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