Skip to content
Related Articles

Related Articles

Improve Article

What is Routing and Nested Routing in Angular 9/8 ?

  • Last Updated : 15 Aug, 2021
Geek Week

In this article, we will learn the routing & nested routing concept in Angular. We will implement the concept to establish routing between different components by making their routes when a user clicks the link, it will be navigated to a page link corresponding to the required component. Let’s understand the routing in Angular. 

Routing: Angular provides extensive navigation functions for simple scenes that are too complex. Defining navigation items and corresponding views is called routing. Routing allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties. Angular provides a separate router module for adjusting navigation in the application. In this article, we will know how to perform routing and nested routing in an Angular application.

Syntax:

ng new app_name
  • For routing, you will need components. Use the below command to create the component.

    Syntax:

    ng g c component_name

    Routing means navigation and Nested-Routing mean sub-navigation or sub-page navigation. Here, we will make three main links name as Home, ContactUs, AboutUs. Inside the about-us component, we will create another two sub-components name as ourCompany & ourEmployees.



  • In app.module.ts, import RouterModule, Routes from @angular/router.

    Syntax:

    import { RouterModule, Routes } from '@angular/router';
  • Then in imports of app-routing.module.ts define the paths.
    const routes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'aboutus', component: AboutUsComponent },
     { path: 'contactus', component: ContactUsComponent }
    ];
    
    @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
    })
  • Define routerLink’s path as the component name in the app.component.html in HTML.
    <a class="active" href="#home" routerLink="/">Home</a>
    <a href="#contact" routerLink="/contactus">Contact</a>
    <a href="#about" routerLink="/aboutus">About</a>
  • Apply router-outlet for your application in app.component.html. The routed views render in the <router-outlet>.
    <router-outlet></router-outlet>
  • Define the HTML for about-us.component.html, contact-us.component.html & home.component.html.
  • Now angular web app is ready to run.

Project Structure: Our project structure will look like the following image:

Project Structure

Let’s follow the steps to build the routing & nested routing for the application.

Step 1: Creating Simple Angular Application. In this step, we will create a simple angular application as an example using the command line argument. We need to run this below command on the command prompt:

ng new geeksforgeeks-routing

Once we run this command, on the command prompt, two things will be asked for creating a routing module and we need to answer yes.

 



Step 2: In this step, after the successful installation process, we will update our app.component.html with the given HTML code.

app.component.html




<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }
  
      li {
        float: left;
      }
  
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
  
      li a:hover {
        background-color: #04aa6d;
      }
  
      .active {
        background-color: #333;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a class="active" href="#home" routerLink="/">Home</a></li>
      <li><a href="#contact" routerLink="/contactus">Contact</a></li>
      <li><a href="#about" routerLink="/aboutus">About</a></li>
    </ul>
  
    <div style="text-align: center; font-weight: bolder; font-size: 50px">
      <router-outlet></router-outlet>
    </div>
  </body>
</html>

Step 3: In this step, we will create three components as home, contact-us, and about-us. For creating these components, we need to run two commands as below mentioned:

ng g component home
ng g component contactUs
ng g component aboutUs

After creating components successfully, we need to create a simple route using both components & simultaneously we need to import all those components to our module file. 

Installation Process

Step 4: We need to import all the required components in the app.module.ts file, after successful installation of those components,

app.module.ts




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { RouterModule, Router } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
  
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactUsComponent,
    AboutUsComponent
  ],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 5: In this step, we are going to update our routing module file.

app-routing.module.ts




import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AboutUsComponent } from "./about-us/about-us.component";
import { ContactUsComponent } from "./contact-us/contact-us.component";
import { HomeComponent } from "./home/home.component";
  
const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
  },
  {
    path: "aboutus",
    component: AboutUsComponent,
  },
  {
    path: "contactus",
    component: ContactUsComponent,
  },
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Now, let’s run our angular application using the below command:

ng serve

 



Step 6: Creating Nested Routes

In our application, we need two more nested routes for about-us. Now, we need to create two more components for this about-us component. For creating a sub-component for about component, we need to run this below command:

ng g component about-us/ourCompany
ng g component about-us/ourEmployees

Installation Process

Step 7: Updating Routing File

In order to add our newly created components, we need to update our existing app-routing.module.ts file:

app-routing.module.ts




import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AboutUsComponent } from "./about-us/about-us.component";
import { OurCompanyComponent } from 
    "./about-us/our-company/our-company.component";
import { OurEmployeesComponent } from 
    "./about-us/our-employees/our-employees.component";
import { ContactUsComponent } from "./contact-us/contact-us.component";
import { HomeComponent } from "./home/home.component";
  
const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
  },
  {
    path: "aboutus",
    children: [
      {
        path: "",
        component: AboutUsComponent,
      },
      {
        path: "our_employees",
        component: OurEmployeesComponent,
      },
      {
        path: "our_company",
        component: OurCompanyComponent,
      },
    ],
  },
  {
    path: "contactus",
    component: ContactUsComponent,
  },
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Step 8: Now, we need to create two buttons inside our about-us component. So, we need to update files:

about-us.component.html




<p>about-us works!</p>
  
<a class="btn btn-primary" routerLink="/aboutus/our_employees">Our Employees</a>
<br>
<a class="btn btn-primary" routerLink="/aboutus/our_company">Our Company</a>

our-company.component.html




<p>our-company works!</p>
  
<a class="btn btn-primary" routerLink="/aboutus">Back</a>

our-employees.component.html




<p>our-employees works!</p>
  
<a class="btn btn-primary" routerLink="/aboutus">Back</a>

Now, we need to run this angular application using the below command:

ng serve

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :