Angular 9/8 Routing and Nested Routing

In this section, we are going to learn routing and nested routing. We will use Angular 8 or Angular 9 to do this. Firstly we will create a route in Angular 9/8, and after that, we will create a nested root.

This section will provide two examples to understand the routing and nested routing in Angular 8 easily. In the first example, we will create a simple Route. In the second example, we will create Nested Routes.

Our application requires the use of a routing system if we work on an extensive application or create a single page application. To create a simple route and sub route, the step by step process is described as follows:

Example 1:

In the 1^st example, we are going to Create a Simple Route. For this, we will use simple components. To install the new Angular app, we will use the below command, which is described as follows:

When we successfully execute the above command, the command prompt will ask us to create the routing module. For the add Angular routing option, we have to write yes, which is described as follows:

  hari@hari-pc:/var/www/me/ang$ ng new appRoute  ? Would you like to add Angular routing? Yes  

When we successfully install the Angular app, we will install Bootstrap. If we don’t have Bootstrap in our system, we will use the following link to install Bootstrap for our Angular 8 application:

https://tutoraspire.com/angular-7-with-bootstrap#:~:text=How%20to%20install%20Bootstrap%20for,%3E%20The%20%403%20is%20important!

When we successfully download our Bootstrap application, we need to setup for container and header. For this, we will use the app.component.html file and update the file like this:

src/app/app.component.html

  <nav class=”navbar navbar-expand-lg navbar-dark bg-primary”>      <a class=”navbar-brand” href=”#”> Routing and Nested Routing Using Angular 9/8 </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>  

Now in our application, we require to create two components. The first component will be created for the home, and the second component will be created for the post. To create these components, we will use the following command:

When we successfully create both components, we will use these components to create the route. For this, we will use the route module file and make some changes, which are described as follows:

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

Now our above code is ready to run. To run the above code, we will use the following command:

When we run this command, the following output will be generated:

Example 2:

In the 2nd example, we will Create Nested Route. Here child route will be created for posts. Now in our application, we require to create two more components. We will create these for posts. The first component will be created for post create, and the second component will be created for post detail. To create these components, we will use the following command:

When we successfully create both components, we have three components for posts: first component for lists, second component for creating, and the third component for detail. Now, we will use the route module file and do the registration, which is described as follows:

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

Now we will use html component file. In order to see better view, we will update that file like this:

src/app/home/home.component.html

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>  

Now our above code is ready to run. In order to run the above code, we will use the following command:

When we run this command, the following output will be generated:

Home Page

Post List Page

Post Create Page

Post Detail Page

Next TopicAdd Highcharts using Angular 9/8

Angular 9/8 Routing and Nested Routing

Angular 9/8 Routing and Nested Routing

Software framework vs library

Response in Postman

You may also like