Guide to Angular Router:Learn routing in Angular
- Get link
- Other Apps
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 -
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
- Get link
- Other Apps
Popular
Top 30 ASP.Net Web API Interview Questions and Answers
In this blog, I have collected interview questions and answers of ASP.Net Web API.
CAML Query Tutorial for SharePoint 2013 and 2010 - A Complete tutorial guide
CAML Query is one of the most important topics in SharePoint. CAML Query is the way for querying items from SharePoint objects like List and Library. This blog is helpful in SharePoint 2010 development as well as in SharePoint 2013 development.
Create a static website using Angular7 step by step tutorial
In this blog, we will see how to create a static website in Angular 7? If you are new to Angular then please visit my earlier blog - Angular Tutorial.
ASP.Net Core CRUD example using ADO.Net
ASP.Net Web API Security
In the previous blog, I wrote about Routing in Web API. I have also explained, How to create a secure Web API? in my earlier blog. If you are new to ASP.Net Web API then please start from the beginning level. What is ASP.Net Web API?
In this blog, let's discuss the Web API security in details.
In this blog, let's discuss the Web API security in details.
What is Web API? When should we use in our projects?
Web API is the Microsoft open source technology for developing REST services based on HTTP protocol. ASP.Net Web API is a framework for building, consuming HTTP based service. The advantage of Web API is that it can be consumed by a wide range of clients like a web browser and mobile applications.
How to use multiple layout pages in MVC application
PowerShell Script to export SharePoint List in Excel File - SharePoint Tutorial
In this blog, I will write about "Export SharePoint list items using PowerShell Script".
Basic Authentication in Web API
How to consume RESTful APi from server side code - C#
Tags
Tags
cloud-computing12
sharepoint-201310
dot-net-core9
sql9
interview8
webservice7
angularjs6
entity-framework6
design-pattern5
linq5
sharepoint-programming5
powershell4
socialmedia4
caml3
rest3
workflow3
ajax2
aws2
html2
infopath2
javascript2
json2
oops2
searchservice2
sharepoint-interview2
soa2
timer job2
website2
3tier1
active-directory1
caching1
devops1
fba1
imageupload1
list1
managed-metadata-service1
metadata1
odata1
page-layout1
performance1
run with elevated1
safecontrol1
security1
sharepoint interview questions1
sharepoint security1
sharepoint-architecture1
sharepoint-branding1
sharepoint-migration1
sharepoint-service1
sharepoint-topics1
sharepointlist1
site-definition1
soap1
uls1
validation1
viewstate1
xml1
Show more
Show less
Comments
Post a Comment
Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks