Hello Devs,

In this tutorial, we are going to discover about nested routing in angular 10.

If you are creating single page application or you need to work big application you must need to use routing system in your application. 

Given below are two simple examples that will easily understand you to work work with angular 10 routing and angular 10 nested routes example.



Example 1:

 Creating Simple Route

ng new appSimpleRoute

hari@hari-pc:/var/www/me/ang$ ng new appRoute

? Would you like to add Angular routing? Yes

src/app/app.component.html

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

    <a class="navbar-brand" href="#">Angular 10 Nested Routing Example - Rathorji.in</a>

    <div class="collapse navbar-collapse" id="navbarText">

        <ul class="navbar-nav mr-auto">

        <li class="nav-item">

            <a class="nav-link" routerLink="/">Home</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" routerLink="/posts">Posts</a>

        </li>

        </ul>

    </div>

</nav>

  

<div class="container">

    <br/>

    <router-outlet></router-outlet>

</div>

create two component one for home and another for post.

ng g c home
ng g c posts

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

  

import { HomeComponent } from './home/home.component';

import { PostsComponent } from './posts/posts.component';

   

const routes: Routes = [

  {

      path: '',

      component: HomeComponent

  },

  {

      path: 'posts',

      component: PostsComponent

  }

];

   

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Run this command:

ng serve



Example 2: 

Creating Nested Routes

ng g c posts/post-create
ng g c posts/post-detail

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

  

import { HomeComponent } from './home/home.component';

import { PostsComponent } from './posts/posts.component';

import { PostCreateComponent } from './posts/post-create/post-create.component';

import { PostDetailComponent } from './posts/post-detail/post-detail.component';

   

const routes: Routes = [

  {

      path: '',

      component: HomeComponent

  },

  {

      path: 'posts',

      children: [

        {

          path: '',

          component: PostsComponent

        },

        {

            path: 'create',

            component: PostCreateComponent

        },

        {

            path: 'detail',

            component: PostDetailComponent

        }

    ]

  }

];

   

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

src/app/home/home.component.html

<h1>Home Page (HomeComponent)</h1>

<p>home works!</p>

src/app/posts/posts.component.html

<h1>Posts Page (PostComponent)</h1>

<p>posts works!</p>

<a class="btn btn-primary" routerLink="/posts/create">Create</a>

<a class="btn btn-primary" routerLink="/posts/detail">Detail</a>

src/app/posts/post-create/post-create.component.html

<h1>Post Create Page (PostCreateComponent)</h1>

<p>post-create works!</p>

<a class="btn btn-primary" routerLink="/posts">Back</a>

src/app/posts/post-detail/post-detail.component.html

<h1>Post Detail Page (PostDetailComponent)</h1>

<p>post-detail works!</p>

<a class="btn btn-primary" routerLink="/posts">Back</a>


Run this command:

ng serve


I hope this example helps you.