Angular router navigate method

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/08/angular-router-navigate-method.html

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Slides
http://csharp-video-tutorials.blogspot.com/2017/08/angular-router-navigate-method.html

Angular 2 Tutorial playlist
https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

In this video we will discuss the use of Angular Router service navigate() method. This method is useful when you want to navigate to another page programmatically.

Let us understand this with an example. Here is what we want to do. On the EmployeeComponent that displays specific employee details, we want to include a Button. When we click the button we want to redirect the user to EmployeeListComponent.

Step 1 : Include the following HTML markup for the button on employee.component.html. Notice we are using Bootstrap button css classes (btn & btn-primary) to style the button. We are using event binding to bind click event of the button to bind to "onBackButtonClick()" method in the EmployeeComponent class.

[div style="margin-top:5px"]
[input type="button" class="btn btn-primary" value="Back to Employees List"
(click)="onBackButtonClick()" /]
[/div]

Step 2 : In the EmployeeComponent class ie. in employee.component.ts file make the following changes

Inclue the following Import statement to import Router service from '@angular/router'
import { Router } from '@angular/router';

Specify a dependency on the Router service using the EmployeeComponent class constructor. The angular injector will automatically inject an instance of the Router service when an instance of EmployeeComponent is created.
constructor(private _router: Router) {
}

Finally include, "onBackButtonClick()" method. Notice we are using the Router service navigate() method to navigate to "/employees" route. This route is already defined in the root module (app.module.ts) which redirects the user to EmployeeListComponent.

onBackButtonClick() :void {
this._router.navigate(['/employees']);
}