Angular7 Routing|Angular7 Navigation between components|RouteModule

API : import { RouterModule,Route } from '@angular/router';

Route

Routes tell the router which view to display when a user clicks a link or pastes a URL into the browser address bar.

Route has two basic properties:

path: a string that matches the URL in the browser address bar.

component: the component that the router should create when navigating to this route.

export const allbaseroutes: Route[] =[
{ path: 'Lab1', component: D3Lab1Component},
{ path: 'Lab2', component: D3lab2Component},
{ path: 'Lab3', component: D3lab3Component}
];

RouterModule.forRoot()

Add RouterModule to the @NgModule.imports array and configure it with the routes in one step by calling RouterModule.forRoot() within the imports array as below

in App.module.ts

@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(allbaseroutes) ],
declarations: [ AppComponent, HelloComponent, D3Lab1Component, D3lab2Component, D3lab3Component ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

RouterOutlet

Open the AppComponent template and add <router-outlet></router-outlet> element.

Navigation link (routerLink)

RouterLink is the selector for the RouterLink directive that turns user clicks into router navigations, Add routerLink as below

And Finally, Add UI Access for Navigation in appcomponent.ts file

<nav>
<a routerLink="/Lab1">Lab 1</a>
<a routerLink="/Lab2">Lab 2</a>
<a routerLink="/Lab3">Lab 3</a>
</nav>
<router-outlet></router-outlet>

Run The Project and see the result

Code Action @ StackBlitz

Angular7 Routing|Angular7 Navigation between components|RouteModule