Name	Name	Last commit message	Last commit date
Latest commit History 22 Commits
_examples-angular6-2-routing	_examples-angular6-2-routing
_images-angular-routing	_images-angular-routing
README.md	README.md

Working with Angular Routing and Navigation

Working with existing/cloned/copied Angular App

Clone or Download the project/app from Github or any other sources
If using Visual Studio Code / Insiders, open Command panel/terminal from menu: View -> Terminal (shortcut key is CTRL + BackTick OR COMMAND + J)
Go inside the project/app directory, command: cd _examples-angular6-2-routing OR cd appName
Run command: npm install to install project/app dependencies (node_modules)
To Build and run Angular App, command: ng serve / npm start OR ng serve -o OR ng serve --open
To change port from 4200 to other port - type command: ng serve --port 5000
To check the application in browser type path/url: localhost:4200 / 5000

1 Angular Routing and Navigation

The Angular Router enables navigation from one view (component) to the another/next as users perform tasks, views (component)
Routing simply means navigating between different view (component)
RouterModule
- RouterModule helps to create routes, which allows us to move from one part of the application to another part or from one view to another
- A separate NgModule/Angular Module that provides the necessary service providers and directives for navigating through application views
Router
- The Angular Router is an optional service that presents a particular component view for a given URL, it is not part of the Angular core
- The Angular Router enables navigation from one view to the another as users perform application tasks/actions
router-outlet
- The directive (<router-outlet>) that marks where the router displays a view (a container to hold different views/components loaded as users perform application tasks/actions)
routerLink
- The attribute/directive for binding a clickable HTML element to a route which denotes link/view name to load/show in (<router-outlet>)

Let's create below Angular Single Page Application (SPA) with Routing and Navigation feature:

Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Home View

Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Home View

Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Departments View

Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Employees View

Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Products View

Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Folder structure

1.Angular Routing Application setup steps:

Generate a new Angular project/app with routing option
Generate departmentList and employeeList, and other required components if any
Configure the Routes
Add buttons and use a directive to navigate

1.1. Generate a new Angular project/app with routing option

Command to create an Angular app with routing: ng new routing-demo-app --routing
Creating a routing module manually in any existing application:
1. In index.html file under <head> tag add <base href="/"> (It helps application to build/generate/constructs URL/view to load properly)
2. In the app, folder create app-routing.module.ts file (contains RoutingModule/Routes for application - enter a required path and components details)
3. import app-routing.module.ts file in app.module.ts file also add in the imports array

1.2. Generate required components if any (departmentList and employeeList, and other)

Angular CLI command to generate component: ng g c employee-list -it -is (Inline Template / Inline style)
Angular CLI command to generate component: ng g c department-list -it -is and other required components if any

1.3. Configure the Routes

In app.component.html add tag/directive: <router-outlet> </router-outlet>
In the app-routing.module.ts file, enter required paths and component details to navigate

1.4. Add buttons and use directive to navigate

In app.component.html add links/buttons: <a routerLink="/home" routerLinkActive="active">Home</a>
We can also use <a routerLink="/home" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Home</a> to make current exact link active

Syntax & Example: index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AngularRoutingNavigation</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
 <app-root></app-root>
</body>
</html>

Syntax & Example: app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './components/department-list/department-list.component';
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
import { HomeComponent } from './components/home/home.component';
import { ProductListComponent } from './components/product-list/product-list.component';
const routes: Routes = [
 // default path
 // { path: '', component:DepartmentListComponent},
 { path: 'home', component: HomeComponent },
 { path: 'departments', component: DepartmentListComponent },
 { path: 'employees', component: EmployeeListComponent },
 { path: 'products', component: ProductListComponent },
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
// create an array of all routing components export it, then import it in app.module.ts
export const RoutingComponents = [
 DepartmentListComponent,
 EmployeeListComponent,
 HomeComponent,
 ProductListComponent,
]

Syntax & Example: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, RoutingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
// RoutingComponents array - list all the components used in application 
// import { DepartmentContactComponent } from './components/department-contact/department-contact.component';
// import { DepartmentDetailsComponent } from './components/department-details/department-details.component';
// import { DepartmentListComponent } from './components/department-list/department-list.component';
// import { DepartmentOverviewComponent } from './components/department-overview/department-overview.component';
// import { EmployeeListComponent } from './components/employee-list/employee-list.component';
// import { HomeComponent } from './components/home/home.component';
// import { ProductListComponent } from './components/product-list/product-list.component';
// import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
@NgModule({
 declarations: [
 AppComponent,
 RoutingComponents,
 // DepartmentDetailsComponent,
 // DepartmentContactComponent,
 // DepartmentOverviewComponent,
 // DepartmentListComponent,
 // EmployeeListComponent,
 // HomeComponent,
 // ProductListComponent,
 // WildcardPagenotfoundComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Syntax & Example: app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<h1 style="text-align:center;">{{ appTitle }}</h1>
<!-- add buttons/links to navigate pages or routings -->
<nav>
 <a routerLink="/home" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Home</a>
 &nbsp;&nbsp;
 <a routerLink="/departments" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Departments</a>
 &nbsp;&nbsp;
 <a routerLink="/employees" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Employees</a>
 &nbsp;&nbsp;
 <a routerLink="/products" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Products</a> &nbsp;&nbsp;
</nav>
<hr />
<!-- ng new routing-demo-app --routing - defulat include router-outlet in app.component.html. routed views goes here -->
<router-outlet></router-outlet>

Syntax & Example: app.component.ts

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 public appTitle = 'Angular Routing and Navigation Module';
}

Syntax & Example: styles.css

/* You can add global styles to this file, and also import other style files */
/* common global generic styles */
.custom-divider {
 margin: 30px 0px;
 border-bottom:2px dashed gray;
}
h1,h2,h3 {
 text-transform: uppercase;
 /* text-transform: capitalize; */
}
h2 {
 text-decoration: underline;
}
body {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 letter-spacing: 2px;
}
li {
 margin: 10px 0px;
}
input {
 padding: 5px;
}
button {
 border-radius: 5px;
 padding: 10px 15px;
 background-color: teal;
 border: none;
 outline: none;
 cursor: pointer;
 color: lightcyan;
}
.button-sub {
 background-color: rgba(0, 128, 128, 0.6);
 color: white;
}
/* route and navigation - links */
nav a {
 padding:10px;
 text-decoration: none;
 margin-top: 10px;
 display: inline-block;
 background-color: #eeeeee;
 border-radius: 4px;
}
nav a:visited, a:link, a {
 color:#607D8B;
}
nav a:hover {
 color:#039be5;
 background-color: #CFD8DC;
}
nav a.active {
 color:#039be5;
 font-weight: bold;
 text-decoration: underline;
}
/* route and navigation - list badge */
.items {
}
.items li, .link-sub {
 width: 200px;
 cursor: pointer;
 width: 150px;
 padding: 10px;
 text-decoration: none;
 margin-top: 10px;
 background-color: #eeeeee;
 border-radius: 4px;
}
.badge {
 background: teal;
 padding: 10px;
 margin-right: 5px;
 position: relative;
 left: -10px;
 border-radius: 4px 0px 0px 4px;
}
.description {
}
/* optional parameter - show highlighted */
.items li.selected {
 color:#039be5;
 background-color: #CFD8DC;
}

2 Wildcard Route and Redirecting Routes (Dealing with unavailable-non-configured route [Page not found])

User can type/enter any unavailable-non-configured route/URL and can get many erros in console, like http://localhost:5000/try Error: (Cannot match any routes, URL segment 'try'...)
To deal/handle any unwanted path or unavailable routes we must need to create a new component named page not found component OR 404 component and add 'wildcard **' route
Wildcard ** routes or any paths with parameters (employees/1 or routes/parameters) must come last in app-routing.module.ts router configuration as router tries to match the paths from top to bottom
In app-routing.module.ts route must be configured in order: most specific at the tpo to list important/specific at the bottom
Default Route: While using wildcard ** routes we also need to provide default route like '{ path: '', component:DepartmentListComponent}' OR '{ path: '', redirectTo:'departments', pathMatch:'full'}'

Steps:

Create a new component for page not found: ng g c wildcard-pagenotfound with a instructional markup: 404 page not found!
In app-routing.module.ts at the bottom/last add a new wildcard route: { path: '**', component: WildcardPagenotfoundComponent }

Syntax & Example: wildcard-pagenotfound.component.html

<p>
 404 page not found! <br/>
 Path/URL not available!! <br/>
 <strong>Try Again!!!</strong> 
</p>

Syntax & Example: app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './components/department-list/department-list.component';
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
import { HomeComponent } from './components/home/home.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
const routes: Routes = [
 // default path
 // { path: '', component:DepartmentListComponent},
 { path: 'home', component: HomeComponent },
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'departments', component: DepartmentListComponent },
 { path: 'employees', component: EmployeeListComponent },
 { path: 'products', component: ProductListComponent },
 { path: '**', component: WildcardPagenotfoundComponent }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
// create an array of all routing components export it then imports it in app.module.ts
export const RoutingComponents = [
 DepartmentListComponent,
 EmployeeListComponent,
 HomeComponent,
 ProductListComponent,
 WildcardPagenotfoundComponent,
]

Image - Output - wildcard-route / Page not found!

3 Route Parameters

In this section will learn to pass and read route parameters, as given below:

In app-routing.module.ts create departments/:id path route parameters for items under department list component
In department-list.component.ts class file create a array of departments object
In department-list.component.html view file iterate/*ngFor through departments array and pass departments id as a route parameter
- on click of the department list item, it will take to department-details.component page with selected department id, at the same time browser location path will be displayed as localhost:5000/department:2 (selected department id )
- To navigate from code/links/buttons we need router service as a dependency
Create and use a new component to show details: department-details.component.ts - read the departments id passed as a parameter and show the route view accordingly
- activatedRoute.snapshot.paramMap.get() is used to read the routes/parameters passed

Syntax & Example: department-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
 selector: 'app-department-list',
 templateUrl: './department-list.component.html',
 styleUrls: ['./department-list.component.css']
})
export class DepartmentListComponent implements OnInit {
 public departments = [
 { 'id': 1, 'name': 'JavaScript' },
 { 'id': 2, 'name': 'Angular' },
 { 'id': 3, 'name': 'NodeJS' },
 { 'id': 4, 'name': 'ReactJS' },
 { 'id': 5, 'name': 'VueJs' },
 ]
 
 constructor(private router: Router) { }
 ngOnInit() {
 }
 onLinkSelect(curDepartment) {
 console.log('onLinkSelect curDepartment');
 // navigate ( path, route parameter)
 this.router.navigate(['departments', curDepartment.id]);
 }
}

Syntax & Example: department-list.component.html

<div>
 <h3>Department list:</h3>
 <ul class="items">
 Click on department to see more details:
 <!-- on link click call function/method to navigate -->
 <li *ngFor="let department of departments" (click)="onLinkSelect(department)">
 <span class="badge">{{department.id}}</span>
 <span class="description">{{department.name}}</span>
 </li>
 </ul>
</div>

Syntax & Example: app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentDetailsComponent } from './components/department-details/department-details.component';
import { DepartmentListComponent } from './components/department-list/department-list.component';
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
import { HomeComponent } from './components/home/home.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
const routes: Routes = [
 // default path
 // { path: '', component:DepartmentListComponent},
 { path: 'home', component: HomeComponent },
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'departments', component: DepartmentListComponent },
 { path: 'departments/:id', component: DepartmentDetailsComponent },
 { path: 'employees', component: EmployeeListComponent },
 { path: 'products', component: ProductListComponent },
 { path: '**', component: WildcardPagenotfoundComponent }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
// create an array of all routing components export it then imports it in app.module.ts
export const RoutingComponents = [
 DepartmentDetailsComponent,
 DepartmentListComponent,
 EmployeeListComponent,
 HomeComponent,
 ProductListComponent,
 WildcardPagenotfoundComponent,
]

Syntax & Example: department-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
 selector: 'app-department-details',
 templateUrl: './department-details.component.html',
 styleUrls: ['./department-details.component.css']
})
export class DepartmentDetailsComponent implements OnInit {
 // to hold the currently passed id parameter
 public selectedDepartmentId;
 constructor(private activatedRoute: ActivatedRoute) { }
 ngOnInit() {
 // read the route parameter
 // snapshot approach 
 console.log(this.activatedRoute.snapshot.paramMap);
 let routeParamId = parseInt(this.activatedRoute.snapshot.paramMap.get('id'));
 this.selectedDepartmentId = routeParamId;
 }
}

Syntax & Example: department-details.component.html

<h3>Selected Deparment Details ID : {{ selectedDepartmentId }} </h3>

Image - Output - Route Parameters Department List

Image - Output - Route Parameters Department Clicked/Selected

4 paramMap Observable

Using the activatedRoute.snapshot got some drawback like: when will navigate back next / previous next from child component (details component to list component) snapshot approach does not work
1. In department-details.component.html add links Previous & Next to see rest of departments with click handler <a (click)="goPrevious()">Back </a>
2. In department-details.component.ts create a handler goPrevious() & goNext() with required logic
3. If you will observe the drawback here is on Previous & Next button clicks, only url updates/changing but view/template not changing (ngOnInit does not get call)
4. To overcome activatedRoute.snapshot problems will use paramMap Observable with subscribe

Syntax & Example: department-details.component.html

<h3>Selected Deparment Details ID : {{ selectedDepartmentId }} </h3>
<br />
<a (click)="goPrevious()" class="link-sub">Previous</a> &nbsp; &nbsp;
<a (click)="goNext()" class="link-sub">Next</a>

Syntax & Example: department-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
@Component({
 selector: 'app-department-details',
 templateUrl: './department-details.component.html',
 styleUrls: ['./department-details.component.css']
})
export class DepartmentDetailsComponent implements OnInit {
 // to hold the currently passed id parameter
 public selectedDepartmentId;
 constructor(private activatedRoute: ActivatedRoute, private router: Router) { }
 ngOnInit() {
 // read the route parameter
 // snapshot approach 
 // console.log(this.activatedRoute.snapshot.paramMap);
 // let routeParamId = parseInt(this.activatedRoute.snapshot.paramMap.get('id'));
 // this.selectedDepartmentId = routeParamId;
 // paramMap Observable approach 
 this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
 let id = parseInt(params.get('id')); // let id = Number(params.get('id'))
 this.selectedDepartmentId = id;
 })
 }
 goPrevious() {
 let previousId = this.selectedDepartmentId - 1;
 this.router.navigate(['/departments', previousId]);
 }
 goNext() {
 let nextId = this.selectedDepartmentId + 1;
 this.router.navigate(['/departments', nextId]);
 }
}

Image - Output - Route Parameters Previous ID

Image - Output - Route Parameters Next ID

Image - Output - Route Parameters Observables Next ID

5 Optional Route Parameters

By using Back button in department-details.component.html we must navigate back to department-list.component.html and show clicked department in selected state`
1. In department-details.component add Back button: <button click="goToDepartments()">Back </button>
2. In department-details.component.ts create a handler goToDepartments() with required logic, // Use Back button to go to main list page and highlight the link by passing optional parameters with departments details, when back it shows in url http://localhost:5000/departments;id=4
3. In department-list.component.ts add required login in ngOnInit() life cycle hook to read the passed optional parameter and to highlight clicked department button

Syntax & Example: department-details.component.html

<!-- // back button - method to handle optional parameters and show current clicked department highlighted -->
<button (click)="goToDepartments()" class="button-sub">Back</button>

Syntax & Example: department-details.component.ts

// back button - method to handle optional parameters and show current department highlighted
goToDepartments() {
 console.log('goToDepartments clicked');
 let currentSelectedId = this.selectedDepartmentId ? this.selectedDepartmentId : null
 //sending optional parameter - used for some logic
 //this.router.navigate(["/departments", { id: currentSelectedId, test: 'test-param-value' }])
 // relative path, links parameter array - {key:value}, {relativeTo property}
 // we can pass multiple parameters as per our requirements
 // this.router.navigate(['../', { id: currentSelectedId, name: 'Hello' }]);
 this.router.navigate(['../', { id: currentSelectedId }]);
}

Syntax & Example: department-list.component.ts

ngOnInit() {
 this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
 let id = parseInt(params.get('id')); // let id = Number(params.get('id'))
 this.selectedDepartmentId = id;
 })
}
/* on department click */
onLinkSelect(curDepartment) {
 console.log('onLinkSelect curDepartment');
 // navigate ( path, route parameter)
 // this.router.navigate(['departments', curDepartment.id]);
 // relative path, links parameter array, relativeTo property
 this.router.navigate([curDepartment.id]);
}
// to compare/match current route clicked and optional parameter
isSelectedRouteMatchOptionalParam(curDepartment) {
 return curDepartment.id === this.selectedDepartmentId;
}

Syntax & Example: styles.css

/* optional parameter - show highlighted */
.items li.selected {
 color:#039be5;
 background-color: #CFD8DC;
}

Image - Output - Optional Route Parameters Back

Image - Output - Optional Route Parameters Selected List

6 Relative Navigation

Absolute path starts with forward slash / (paths like /name are absolute/fixed path)
Absolute/Fixed paths are not flexible as if file/route name changes we need to make change at all occurrences/places in an application
Its advisable to use relative path/navigation with relativeTo property

Syntax & Example: department-list.component.ts

/* on department click */
onLinkSelect(curDepartment) {
 console.log('onLinkSelect curDepartment');
 // navigate ( path, route parameter)
 // this.router.navigate(['departments', curDepartment.id]);
 // relative path, links parameter array, relativeTo property
 this.router.navigate([curDepartment.id], { relativeTo: this.activatedRoute }); // to the current route append the department id and navigate to that URL
}

Syntax & Example: department-details.component.ts

// back button - method to handle optional parameters and show current department highlighted
goToDepartments() {
 console.log('goToDepartments clicked');
 let currentSelectedId = this.selectedDepartmentId ? this.selectedDepartmentId : null
 //sending optional parameter - used for some logic
 //this.router.navigate(["/departments", { id: currentSelectedId, test: 'test-param-value' }])
 // relative path, links parameter array - {key:value}, {relativeTo property}
 // we can pass multiple parameters as per our requirements
 // this.router.navigate(['../', { id: currentSelectedId, name: 'Hello' }]);
 this.router.navigate(['../', { id: currentSelectedId }], { relativeTo: this.activatedRoute }); // to the current route append the department id and navigate to that URL
}

7 Child Routes

In application, some routes/path/links/pages viewed only within other routes - in such scenario we can create and use child routes in app-routing.module.ts
Like inside department-details component we need to show links/pages like: Overview, Contact, Pictures etc.
Create child components with angular cli command:
- department-overview - ng g c department-overview
- department-contact - ng g c department-contact
Change/add app-routing.module.ts with children property
Inside parent component department-details create <router-outlet> as a container area for loading pages, also create buttons overview and contact to navigate to component/pages/route <button (click)="showOverview()">Overview</button>

Syntax & Example: app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentContactComponent } from './components/department-contact/department-contact.component';
import { DepartmentDetailsComponent } from './components/department-details/department-details.component';
import { DepartmentListComponent } from './components/department-list/department-list.component';
import { DepartmentOverviewComponent } from './components/department-overview/department-overview.component';
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
import { HomeComponent } from './components/home/home.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
const routes: Routes = [
 // default path
 // { path: '', component:DepartmentListComponent},
 { path: 'home', component: HomeComponent },
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'departments', component: DepartmentListComponent },
 {
 path: 'departments/:id', component: DepartmentDetailsComponent,
 children: [
 { path: 'overview', component: DepartmentOverviewComponent },
 { path: 'contact', component: DepartmentContactComponent },
 ]
 },
 { path: 'employees', component: EmployeeListComponent },
 { path: 'products', component: ProductListComponent },
 { path: '**', component: WildcardPagenotfoundComponent }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
// create an array of all routing components export it then import it in app.module.ts
export const RoutingComponents = [
 DepartmentContactComponent,
 DepartmentDetailsComponent,
 DepartmentListComponent,
 DepartmentOverviewComponent,
 EmployeeListComponent,
 HomeComponent,
 ProductListComponent,
 WildcardPagenotfoundComponent,
]

Syntax & Example: department-details.component.html

<h3>Selected Deparment Details ID : {{ selectedDepartmentId }} </h3>
<br />
<a (click)="goPrevious()" class="link-sub">Previous</a> &nbsp; &nbsp;
<a (click)="goNext()" class="link-sub">Next</a>
<button (click)="showOverview()">Overview </button> &nbsp; &nbsp;
<button (click)="showContact()">Contact</button>
<router-outlet></router-outlet>
<br /> <br />
<hr />
<br />
<!-- // back button - method to handle optional parameters and show current clicked department highlighted -->
<button (click)="goToDepartments()" class="button-sub">Back</button>

Syntax & Example: department-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
@Component({
 selector: 'app-department-details',
 templateUrl: './department-details.component.html',
 styleUrls: ['./department-details.component.css']
})
export class DepartmentDetailsComponent implements OnInit {
 
 // to hold the currently passed id parameter
 public selectedDepartmentId;
 constructor(private activatedRoute: ActivatedRoute, private router: Router) { }
 ngOnInit() {
 // read the route parameter
 // snapshot approach 
 // console.log(this.activatedRoute.snapshot.paramMap);
 // let routeParamId = parseInt(this.activatedRoute.snapshot.paramMap.get('id'));
 // this.selectedDepartmentId = routeParamId;
 // paramMap Observable approach 
 this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
 let id = parseInt(params.get('id')); // let id = Number(params.get('id'))
 this.selectedDepartmentId = id;
 })
 }
 /* Previous/Back button click */
 goPrevious() {
 let previousId = this.selectedDepartmentId - 1;
 this.router.navigate(['/departments', previousId]);
 }
 /* Next button click */
 goNext() {
 let nextId = this.selectedDepartmentId + 1;
 this.router.navigate(['/departments', nextId]);
 }
 // back button - method to handle optional parameters and show current department highlighted
 goToDepartments() {
 console.log('goToDepartments clicked');
 let currentSelectedId = this.selectedDepartmentId ? this.selectedDepartmentId : null
 //sending optional parameter - used for some logic
 //this.router.navigate(["/departments", { id: currentSelectedId, test: 'test-param-value' }])
 // relative path, links parameter array - {key:value}, {relativeTo property}
 // we can pass multiple parameters as per our requirements
 // this.router.navigate(['../', { id: currentSelectedId, name: 'Hello' }]);
 this.router.navigate(['../', { id: currentSelectedId }], { relativeTo: this.activatedRoute }); // to the current route append the department id and navigate to that URL
 }
 /* on overview button click */
 showOverview() {
 this.router.navigate(['overview'], { relativeTo: this.activatedRoute })
 }
 /* on contact button click */
 showContact() {
 this.router.navigate(['contact'], { relativeTo: this.activatedRoute })
 }
}

Image - Output - Department List

Image - Output - Child Route Department Overview

Image - Output - Child Route Department Contact

Image - Output - Optional Route Parameter Show Selected Department highlighted

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

dinanathsj29/angular-routing-and-navigation-tutorial

Folders and files

Latest commit

History

Repository files navigation

Working with Angular Routing and Navigation

Working with existing/cloned/copied Angular App

1 Angular Routing and Navigation

Let's create below Angular Single Page Application (SPA) with Routing and Navigation feature:

1.Angular Routing Application setup steps:

1.1. Generate a new Angular project/app with routing option

1.2. Generate required components if any (departmentList and employeeList, and other)

1.3. Configure the Routes

1.4. Add buttons and use directive to navigate

2 Wildcard Route and Redirecting Routes (Dealing with unavailable-non-configured route [Page not found])

3 Route Parameters

4 paramMap Observable

5 Optional Route Parameters

6 Relative Navigation

7 Child Routes

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages

Uh oh!

Languages

dinanathsj29/angular-routing-and-navigation-tutorial

Folders and files

Latest commit

History

Repository files navigation

Working with Angular Routing and Navigation

Working with existing/cloned/copied Angular App

1 Angular Routing and Navigation

Let's create below Angular Single Page Application (SPA) with Routing and Navigation feature:

1.Angular Routing Application setup steps:

1.1. Generate a new Angular project/app with routing option

1.2. Generate required components if any (departmentList and employeeList, and other)

1.3. Configure the Routes

1.4. Add buttons and use directive to navigate

2 Wildcard Route and Redirecting Routes (Dealing with unavailable-non-configured route [Page not found])

3 Route Parameters

4 paramMap Observable

5 Optional Route Parameters

6 Relative Navigation

7 Child Routes

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages