How to enable routing and navigation between component pages in Angular 8 ?

27 May, 2020
The task is to enable routing between angular components by making their routes when a user clicks the link, it will be navigated to page link corresponding to the required component.
Let us know what is routing in Angular
Angular 8 routing:
The Angular 8 Router helps to navigate between pages that are being triggered by the user’s actions. The navigation happens when the user clicks on the link or enter the URL from the browser address bar. The link can contain the reference to the router on which the user will be directed. We can also pass other parameters with a link through angular routing.
Approach:
Create an Angular app.syntax:ng new app_name
syntax:
ng new app_name
For routing you will need components, here we have made two components (home and dash) to display home page and dashboard.syntax:ng g c component_name

syntax:
ng g c component_name

In app.module.ts, import RouterModule from @angular/router.syntax:import { RouterModule } from '@angular/router';

syntax:
import { RouterModule } from '@angular/router';

Then in imports of app.module.ts define the paths.imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'dash', component:DashComponent } 
    ])
  ],

imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'dash', component:DashComponent } 
    ])
  ],

Now for HTML part, define the HTML for app.component.html. In link, define routerLink’s path as the component name.<a routerLink="/home">Home </a><br>
<a routerLink="/dash">dashboard</a>
<a routerLink="/home">Home </a><br>
<a routerLink="/dash">dashboard</a>
Apply router-outlet for your application in app.component.html.The routed views render in the <router-outlet><router-outlet></router-outlet>

<router-outlet></router-outlet>

Now just define HTML for home.component.html and dash.component.html file.
Your angular web-app is ready.
Code Implementation:
app.module.ts:import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { HomeComponent } from './home/home.component';import { DashComponent } from './dash/dash.component';  @NgModule({  declarations: [    AppComponent,    HomeComponent,    DashComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    RouterModule.forRoot([      { path: 'home', component: HomeComponent },      { path: 'dash', component:DashComponent }     ])  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { HomeComponent } from './home/home.component';import { DashComponent } from './dash/dash.component';  @NgModule({  declarations: [    AppComponent,    HomeComponent,    DashComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    RouterModule.forRoot([      { path: 'home', component: HomeComponent },      { path: 'dash', component:DashComponent }     ])  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }
app.component.html<a routerLink="/home">Home </a><br><a routerLink="/dash">dashboard</a><router-outlet></router-outlet>
app.component.html
<a routerLink="/home">Home </a><br><a routerLink="/dash">dashboard</a><router-outlet></router-outlet>
home.component.html<h1>GeeksforGeeks</h1>
home.component.html
<h1>GeeksforGeeks</h1>
dash.component.html<h1>Hey GEEKS! Welcome to Dashboard</h1>
dash.component.html
<h1>Hey GEEKS! Welcome to Dashboard</h1>
Output:
Run the development server and click on the links:
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.