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

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

• 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
  

• In app.module.ts, 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 } 
      ])
    ],
  

• 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>

• Apply router-outlet for your application in app.component.html.The routed views render in the <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.component.html

  <a routerLink="/home">Home </a><br>
  <a routerLink="/dash">dashboard</a>
  <router-outlet></router-outlet>

• home.component.html

  <h1>GeeksforGeeks</h1>

• dash.component.html

  <h1>Hey GEEKS! Welcome to Dashboard</h1>

Output:

Run the development server and click on the links: