Angular 11 Router Tutorial With Example

December 29, 2020 XpertPhp

Today, we will discuss with you how to configure routing manually using a Router Module and outlet(Angular 11 Router Tutorial With Example). now we will create an application and add routing and navigation for our applications.

You can easily Add Routing to your angular application by using our example. we are creating a Simple Route application. so you can see our angular 11 router tutorial with an example.

Create new angular app

We will create a new angular app using the following command.

ng new myapp
cd myapp

1 2	ng new myapp cd myapp

when you create your application at that time Angular CLI asks you Would you like to add Angular routing? (y/N). If you enter with y for Yes. then the angular router will be automatically configured.

Create a component in angular

Now we need to create three-component such as home, about, and contact. So let’s run the following command to create components.

ng g c home

1	ng g c home

ng g c about

1	ng g c about

ng g c contact

1	ng g c contact

Update view file in angular

src/app/app.component.html
In this example, we will create a simple navigation menu using bootstrap. we need a router link to redirect the different routes and also add a router-outlet.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" routerLink="/">\Angular 11 Router Tutorial With Example</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="/about">About</a>
			</li>
			<li class="nav-item">
			   <a class="nav-link" routerLink="/contact">Contact</a>
			</li>
        </ul>
    </div>
</nav>
<div class="container">
    <router-outlet></router-outlet>
</div>

<a class="navbar-brand" routerLink="/">\Angular 11 Router Tutorial With Example</a>

</li>

<a class="nav-link" routerLink="/about">About</a>

</li>

<a class="nav-link" routerLink="/contact">Contact</a>

</li>

</ul>

</div>

</nav>

<router-outlet></router-outlet>

</div>

src/app/home/home.component.html

<h3>Welcome To Home Page</h3>
<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
<p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

<h3>Welcome To Home Page</h3>

<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>

<p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

src/app/about/about.component.html

<h3>Welcome To About Page</h3>
<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
<p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

<h3>Welcome To About Page</h3>

<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>

src/app/contact/contact.component.html

<h3>Welcome To Contact Page</h3>
<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
<p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

<h3>Welcome To Contact Page</h3>

<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>

Adding Routing to your Angular 10

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';   
import { ContactComponent } from './contact/contact.component';   

const routes: Routes = [
  {
      path: '',
      component: HomeComponent
  },
  {
      path: 'about',
      component: AboutComponent
  },
  {
      path: 'contact',
      component: ContactComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

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

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

import { AboutComponent } from './about/about.component';

import { ContactComponent } from './contact/contact.component';

const routes: Routes = [

{

path: '',

component: HomeComponent

{

path: 'about',

component: AboutComponent

{

path: 'contact',

component: ContactComponent

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Run Our Angular Application

Now we will run our Angular application using the below command.

ng serve

ng serve

Please follow and like us:

Create new angular app

Create a component in angular

Update view file in angular

Adding Routing to your Angular 10

Run Our Angular Application

Related posts: