Angular router navigate method Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 37 of angular2 tutorial in
this video we'll discuss the angular
router service navigate method this
method is very useful when we want to
programmatically navigate the user from
one page to another page let's
understand this with an example here is
what we want to do on our employee
component which displays his specific
employee details we want to include this
button back to employees list and when
we click this button we want to redirect
the user to the employee list page so
within the click event handler of this
part and we're going to write code to
programmatically navigate the user from
employee component to employee list
component
so first let's include the required HTML
to get this button on our employee
component let's flip over to visual
studio here is the view template of our
employee component so in the end let's
include an input element of type button
and we are going to use bootstrap CSS
classes to style this button so let's
use BTN and BTN primary CSS classes and
the value on the button is back to
employee list
let's close the button save our changes
and reload this webpage notice now we
have back to employee list button but it
is kind of attached to the table above
so let's wrap this button in a div
element and then give some margin on the
top so let's include a div element here
a set margin top to 5 pixels and let's
close the div element right here let's
format this a bit save our changes and
then reload this web page one more time
notice now the button is not attached to
the table next let's use the router
service navigate method to
programmatically navigate from employee
component to employee list component so
let's flip over to visual studio one
more time and here is the employee
component class file so the first thing
that we need to do here is import order
service from angular router we are
already importing activated route in
addition to that let's also import the
router service
to be able to use the router service
navigate method we need an instance of
this router service so let's use
dependency injection to get an instance
of this router service notice at the
moment this employee component class has
a dependency on employee service and
activated route service to get an
instance of these two services we are
using dependency injection so let's also
use dependency injection to get an
instance off router service so let's
format this code first so we can see all
of it a little better and then let's
include a constructor parameter so now
we have specified that we also have a
dependency on router service so whenever
an instance of this employee component
is created an instance of router service
is injected into this component and we
can use this private variable throughout
this employee component class finally
let's include a method within our
employee component class which will have
the required code to navigate the user
I'm going to call this method on back
button click and this method is not
going to return anything so the return
type is void and in here we are going to
use this private variable underscore
router so this dot underscore router dot
and this object provides navigate method
and to this method we specify the part
of the route that we want to navigate to
as an argument we want to navigate to
this part for slash employees and if you
recollect from our previous videos we
have already defined this route within
our fruit application module which is
app dot module dot es so within this
file we have that path employees defined
already here and append we see this path
in the URL we want the user to be
redirected to employee list component
and finally we need to bind to this
method so within our employee component
view template let's use event binding
with event binding we use parentheses
and then we want to buy into the click
event and to the click event we want to
bind this method on back button click so
let's save all these changes and reload
this webpage notice now when we click
this button we are redirected back to
employee list component now let's
quickly recap what we have done to
programmatically navigate the user first
within the view template include the
required HTML notice here we are using
angler even binding to bind this method
on back button flag to the click event
of the button and then within the
component class import route a service
from angler router module and then use
dependency injection to create an
instance of the router service and then
implement the on back button click
method which is bound to the click event
of the button and within this method we
write the code to navigate the user so
here we are using the navigate method of
the router service and then we specify
the part of the route to navigate to as
an argument to the navigate method thank
you for listening and have a great day