Angular 9/8 Routing and Nested Routing Tutorial With Example

Angular 9/8 Routing and Nested Routing Tutorial With Example

In this post we will give you information about Angular 9/8 Routing and Nested Routing Tutorial With Example. Hear we will give you detail about Angular 9/8 Routing and Nested Routing Tutorial With ExampleAnd how to use it also give you demo for it if it is necessary.

Here, i will give you brief explanation on angular 9/8 routing and sub routing example. i will learn you how to create first route in your angular 9/8 app, as well as you will also show how to create nested routes in angular 9/8.

I will give you two simple examples that will easily understand you to work work with angular 8 routing and angular 8 nested routes example.

If you are creating single page application or you need to work big application you must need to use routing system in your application. in this tutorial, i will give you step by step explanation for how to create simple route and sub route in angular 8.

Let’s see bellow examples that will help you to learn route more:

Example 1: Creating Simple Route

In this step, we will create very simple example with simple component. so you need to run following command to install new angular app.

ng new appSimpleRoute

After run this command, terminal will ask you for creating route module and you need to make yes as like bellow:

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

? Would you like to add Angular routing? Yes

Ok, after installed successfully app. you can install bootstrap for your application because i used it. you can install it by this link: Install Bootstrap to Angular 8.

After bootstrap successfully. we have to setup for header and container, so let’s updated app.component.html file:

src/app/app.component.html

<nav >

<a href="#">Angular 8 Nested Routing Example - ItSolutionStuff.com</a>

<div id="navbarText">

<ul >

<li >

<a routerLink="/">Home</a>

</li>

<li >

<a routerLink="/posts">Posts</a>

</li>

</ul>

</div>

</nav>

<div >

<br/>

<router-outlet></router-outlet>

</div>

Now we need to create two component one for home and another for post. So let’s run following command to create two component:

ng g c home

ng g c posts

After generating successfully both of component we will create simple route using both of component, so let’s change on route module file:

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 we can run simple created routes:

you can check it by following command:

ng serve

Now you can see layout as like bellow screen shot:

Example 2: Creating Nested Routes

In existing example, we will create child route for posts. so first of all we will create two more component with posts. we have to create component for post create and post detail. so you have to run following command:

ng g c posts/create

ng g c posts/detail

Now you can see you have total three component for posts, one for list, create and detail. so now you can register in route module as like bellow:

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 simply we will just updated html component files so you can see better view, let’s change as bellow:

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 routerLink="/posts/create">Create</a>

<a 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 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 routerLink="/posts">Back</a>

you can check it by following command:

Also see:Angular Font Awesome – How to install font awesome in Angular 9/8?

ng serve

Now you can see layout as like bellow screen shot:

Home Page

Post List Page

Post Create Page

Post Detail Page

I hope it can help you…

Hope this code and post will helped you for implement Angular 9/8 Routing and Nested Routing Tutorial With Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

2  +  7  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US