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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 { }

    chevron_right

    
    

  • app.component.html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • home.component.html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <h1>GeeksforGeeks</h1>

    chevron_right

    
    

  • dash.component.html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

Output:

Run the development server and click on the links:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.