How to Create Routing Module in Angular?

How to Create Routing Module in Angular?

In this post we will give you information about How to Create Routing Module in Angular?. Hear we will give you detail about How to Create Routing Module in Angular?And how to use it also give you demo for it if it is necessary.

Today, i will let you know example of how to create routing module in angular. i will show you simply example of angular create routing module command. i explained simply about angular create app routing module. We will look at example of angular create router module.

i will give you step by step instruction of how to create module with routing in your angular application. i will give you very simple example so you can easily understand how it works.

you can easily create module using command in angular 6, angular 7, angular 8 and angular 9 application.

In this example, i will simply create one admin module and inside admin module we will create home, user and post component that will call module route file. you have to just follow few step and it will done and layout will be as like bellow:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-module-app

Step 2: Create Admin Module

After creating successfully app, we need to create module using angular cli command. angular provide command to create module with routing in angular application. so let’s run bellow command to create admin module:

ng g module admin --routing

run successfully command, it will create files as like bellow path:

src/app/admin/admin.module.ts

src/app/admin/admin-routing.module.ts

Step 3: Create Component For Module

Now we will add new component to our admin module using bellow command, so let’s create home, user and post component for admin module:

ng g component admin/home

ng g component admin/user

ng g component admin/post

run successfully command, it will create folder with files as like bellow path:

src/app/admin/home/*

src/app/admin/user/*

src/app/admin/post/*

There is html file to all three component. so you can simple update that file with your content to checking demo if you want.

Step 4: Add Route for Component

In this step, we will simply add route with created component. so we have to update our admin-routing module file as like bellow code:

src/app/admin/admin-routing.module.ts

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

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

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

import { UserComponent } from './user/user.component';

import { PostComponent } from './post/post.component';

const routes: Routes = [

{path : '', component : HomeComponent},

{path : 'user', component : UserComponent},

{path : 'post', component : PostComponent}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class AdminRoutingModule { }

Step 5: Update Component HTML File

here, we have to update our app component html file, we need to add links of all route with router-outlet, so let’s update it as like bellow:

I used bootstrap class on this file. so if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

src/app/app.component.html

<div >

<nav >

<a href="#">Admin Panel</a>

<div id="navbarSupportedContent">

<ul >

<li >

<a href="#home" routerLink="/">Home <span >(current)</span></a>

</li>

<li >

<a href="#user" routerLink="/user">User</a>

</li>

<li >

<a href="#post" routerLink="/post">Post</a>

</li>

</ul>

</div>

</nav>

</div>

<div >

<router-outlet></router-outlet>

</div>

Step 6: Import Module to module.ts file

In last step, we will simply import our module to module.ts file, so, let’s update that file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AdminModule } from './admin/admin.module';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule,

AdminModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Now we are ready to run our example, you can run by following command:

ng serve

You will have layout like as bellow.

I hope it can help you…

Hope this code and post will helped you for implement How to Create Routing Module in Angular?. 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 *

9  +  1  =  

We accept paid advance and paid guest Posting on our Site : Contact US