How To Create Routing and Navigation In Angular2

Posted By : Swati Rahangdale | 26-Feb-2018

Angular2

The Angular Router enables navigation from one view to the next application tasks.

These are following steps to configure routing in angular 2 application.

1. Base Href tag:

The <base href="/"> tag tells the Angular router what is the static part of the URL. The router modifies the remaining part of the URL.

<head>

</head>

2. Create a Routing Configuration:

First Create a Routes file

For example:src/app/app-routing.module.ts

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

@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }

3. Import specified configuration from the angular library for Basic routing configuration:

Syntax:

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

4. Then Create an array of Routes:

These are two properties in angular 2

Path
Component

Example: const appRoutes: Routes = [

Example: const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },//here url mapped to Home component.
{ path: 'profile/:id', component: ProfileComponent },//here url mapped to profile component.
{
path: 'heroes',
component: ProfileComponent,
data: { title: 'Profilet' }
},
{ path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
// other imports here
],
})
export class AppModule { }

5.RouterModule.forRoot():

Add RouterModule to the @NgModule.imports array and configure it with the routes in one step by calling RouterModule.forRoot() within the imports array, like this:

The method is called forRoot() because you configure the router at the application's root level.

Syntax: imports: [ RouterModule.forRoot(routes) ]

for Example:

@NgModule({
declarations: [
RoutesDemoApp,
HomeComponent,
ProfileComponentComponent,
DashboardComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes) // <-- installs Router routes, components and services
],
bootstrap: [ RoutesDemoApp ],
providers: [
provide(LocationStrategy, {useClass: HashLocationStrategy})
]
})
class RoutesDemoAppModule {}
// bootstrap our app
platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule)
.catch((err: any) => console.error(err));

6. RouterOutlet:

The RouterOutlet directive informs our router where to render the content in the other page view.
The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported router module.

For example:

<h1>{{heading}}</h1>
<router-outlet></router-outlet>
<app-messages></app-messages>
@View({
template: 
<div>
router template here
<router-outlet></router-outlet>
</div>
})

7. RouterLink:

RouterLink used the directive in anchor elements.

For example:

@View({
template: 
<div>
<nav>
<a>Navigation:</a>
<ul>
<li><a [router-link]="['home']">Home</a></li>
<li><a [router-link]="['profile']">Profile</a></li>
<li><a [router-link]="['dashboard']">Dashboard</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
})