Guide to Angular Router:Learn routing in Angular

Routing means navigating from one page to another page in an application. In this blog, we will create routes, child routes in an Angular app to demonstrate the concept of routing in Angular.

We will see Routing, Child Routing and Params which are main concept in Angular routing and same will help in building single page application.

Routing

You may have notice Angular Routing while creating an Angular project.

While creating a new Angular project through CLI, it ask 'Would you like to add Angular routing? (y/N)'

Once you select yes, it creates a app-routing.module.ts file in src-> app folder.

This file import NgModule, Routes, RouterModule.

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

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

Router-Outlet, Routes, path are main component in Angular Routing.

We have to define all the routes in Routes. Routes is an array of route configuration.

const routes: Routes = [];

To define all the routes in app-routing module first import all the component.

import { Page1Component } from './pages/page1/page1.component';

import { Page2Component } from './pages/page2/page2.component';

import { Page3Component } from './pages/page3/page3.component';

Now add values to Routes array as shown below.

const routes: Routes = [

{path:'page1',component:Page1Component},

{path:'page2',component:Page2Component},

{path:'page3',component:Page3Component}

];

Now build your project by using ng serve command and open your application in a browser.
Try to navigate /page1, /page2 and /page3, we will see that corresponding html content is loading in browser.

Child Routing

Child Routing is the part of routing in Angular. Child Routing is useful in case we have want to create submenu.
For eg - A product menu can have multiple child menu such as Product Type1, Product Type2 .....

In our case, we will create a new component called 'mainpage' and there will be 3 submenu page1, page2, page3

In this scenario we have to modify Routes array in app-routing module file.

const routes: Routes = [

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

{path:'demo',component:DemoComponent},

{path:'main',component:MainpageComponent, children:[

{path:'page1',component:Page1Component},

{path:'page2',component:Page2Component},

{path:'page3',component:Page3Component}

]},

];

Now, we have to modify our mainpage.component.html file (i.e. Parent html page of child menu)
Add child links and <router-outlet> tag.

<p>

mainpage works!

</p>

<div>

<a routerLink="page1"></a>

<a routerLink="page2"></a>

<a routerLink="page3"></a>

</div>

<div>

<router-outlet>

</router-outlet>

</div>

We can access /main/page1, /main/page2 and /main/page3 respectively to access page1, page2 and page3.

Params

To access parameters in URL. It is similar to accessing query string value from a URL.

For eg - [http://][localhost]:[4200/details/<prdid>]
And then, we will access the value of prdid which will be dynamic.

I have created a DetailsComponent to display the details of the product.
To access Params from URL in Angular first import ActivatedRoute in DetailsComponent file

import {ActivatedRoute} from '@angular/router';

And add below code to DetailsComponent class file.

export class DetailsComponent implements OnInit {

productId;

constructor(private actRoute:ActivatedRoute) { }

ngOnInit() {

this.actRoute.params.subscribe(prd=>

{

this.productId = prd.prdid;

}

)

}

}

Note- prdid is the same variable which we will define in route.

Now, we will define the route for Params

{path:'details/:prdid',component:DetailsComponent}

Now open DetailsComponent html file to access the Param available in URL

This is details of Product Id {{productId}}

Note - productId used in Component HTML file is same variable used in DetailsComponent class file.

Hope you like this blog.
Please share this blog on social media and give your feedback in comment box below.

You may like other blogs -

• MVC Tutorial
• Web API Tutorial
• Angular Tutorial
• Learn TypeScript

Interview Questions and Answers Series -

MVC Interview Questions and Answers
Web API interview questions and answers

Keep following - SharePointCafe.Net

Prev - Forms in Angular 7
Next - Route Guards in Angular