Angular 2 route parameters Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 31 of angular 2 tutorial in
this video we'll discuss how to pass
parameters to routes in angular this is
continuation to part 30 in part 30 we
discuss the basics of routing so please
watch part 30 before proceeding here is
what we want to be able to do we want to
convert this employee code column within
our employee list component to a
clickable hyperlink and then any user
clicks on the employee code we want to
redirect the user to a URL that looks
like this notice this last piece of the
URL segment right here this is the
employee code on which the user has
clicked so when a user clicks on any of
the employee code then we want to send
that specific employee code to the route
as a parameter and then within our
destination component which is going to
be the employee component this component
reads that parameter value from the URL
and then calls the server-side web api
service retrieving that specific
employee details and then displaying
those details as you can see right here
so let's see how to achieve this using
route parameters in angular so the first
step is to create a route with a
parameter notice this new route right
here now here we are specifying a
parameter using four slash and colon in
our case we are passing employee code as
parameter so I named it code now when
angular router sees a route like this we
want it to redirect the user to employee
component which displays that specific
employee details so first let's go ahead
and create this route so let's flip over
to visual studio and within our applet
module dot es file here let's define our
so out with parameter so our next step
is to bind to the route that we have
just created using router linked
directive notice in this case we are
binding the router link directive to an
array and this array has got two
elements this is the first element and
here is the second element this array is
called
link parameters array the first element
in the array is the part of the route
to the destination component and the
second element in the array is the route
parameter value in our case employee
code notice the route that we have here
has got a parameter in it so when we
bind to that route using louder link
graph you will have to pass a value for
that parameter in our case we won't
employee code so we are using the code
property of the employee object another
important point to note here is the
square brackets that you're using the
router length directive notice in this
case we are binding the router link
directive to link parameters array and
to get the employee code we are binding
to the code property of the employee
object so to tell angular that we are
using property binding we'll have to use
this square bracket on the other hand if
we are binding the router length
directive to just a string like we did
in our previous video so for example if
we look at this app that component dot
TS
here we are using router linked
directive to bind to the string home in
this case we are binding it to employees
so here we're binding it just to a
string so in this case we don't have to
use the square bracket but here we are
binding it to link parameters array and
to the property of the employee object
so to dilute property binding we have to
use square brackets otherwise it may not
work as expected so now let's use wrote
a link directive to bind to the route
that we have created with employee code
parameter so within our employee list
component HTML file here is the TD that
displays employee code now we want to
turn the employee code to a clickable
hyperlink so let's use an anchor element
here and then let's use of a router link
directive we know we are going to bind
this to a property so let's use a pair
of square brackets to denote property
binding and in this case we are binding
it to a linked rameters array so to
denote an array we use pair of square
brackets and the first element of the
array is the part of the route to the
destination component in our case it is
for slash employees that's the part of
the route and then this route that we
are binding to also has a parameter
employee
code so we need to pass a value for that
parameter and to get an employee code
we're going to use this employee object
that we are iterating over so this
object will be available within this TD
right here so we can use that object and
then the code property of the employee
object to get that specific employee
code and this will be passed to the load
parameter and let's close our anchor
element and then let's move this closing
anchor element just before the closing
TD that we have right here and let's
format this a bit now we want a service
method which is going to return us
employee by code we provide that method
with an employee code and we want that
method to return that specific employee
details now if you look at the web EPA
service that we have built in one of our
previous videos at the moment this Web
API service has got two variations of
ket method they first get method right
here returns as the list of all employee
objects whereas this one takes in an
employee code and returns us that
specific employee object but if you look
at our client side service our Angeles
service which is present in this file
right here employee dot service dot
tears we only have this get employees
method which returns us the list of all
employees now we want another method
here which is going to call the web api
server-side method which accepts
employee code as a parameter and returns
that specific employee object so let's
create a method right here which is
going to call that web api method and
returns as that specific employee object
so here this method is very similar to
what we have right here we want a
specific employee so we are passing that
employee code as a parameter employee
code is of type string so the data type
is string and then this method returns
an observable or fie employee array but
here we are getting only one employee so
it returns observable of AI employee and
here we are issuing a request to this
URL API slash
employees and in the URL they are also
passing the employee code and where are
we getting this employee code from that
is
into the metadata parameter and then
this suicide web okay so this is going
to written at that specific employee
object now this map operator is going to
transform that response the employee
object to I employee type and then we
are using the catch operator to handle
any errors so this code is very similar
to what we have in get employees method
now let's quickly recap what we have
done so far we have created a route with
a parameter and then we are binding to
that route using route a link directive
so with this tab we should have the
employee code within our employee list
component clickable and when we click
employee code it should pass that
specific employee code in the URL so
let's quickly test that so with all the
changes that we have done so far let's
run our application by pressing ctrl f5
we have the homepage here now let's
click on the employees tab and we see
the list of employees if you don't see
the list of employees and if you see a
message saying problem with the service
make sure you have your web api service
running and look at this employee code
column here every employee code is
clickable and when I click on a specific
employee code that employee code is
passed as a parameter in the URL and
here we have a component which displays
employee details but at the moment the
data within this employee component is
hard-coded so whenever we click on any
employee we see the same details here
and what we want to do is read the
employee code from the URL and then call
this method get employee by code and
pass it the employee code this is going
to call the server-side web api method
and that's going to retrieve the data
for that employee from the database
table and we will use this employee
component to display that specific
employee details so the first step is to
read this parameter value from the URL
and to do that we are going to make use
of activated route service provided by
angular now let's take a look at the
employee component that we have created
in one of our previous videos here is
the typescript file of that employee
component
notice the data for the employees
hard-coded within the component class we
don't need all these properties and this
method so I'm going to delete them and
we're going to make use of I employee
interface that we created in one of our
previous videos and that interface is
present in this file employee dot TS
notice here we have I employee interface
with all of our employee properties and
we want to use this interface with
another employee component so let's
include the required import statement
and then with another component class
I'm going to create a property let's
call it employee this property is going
to keep track of the employee object
that we are going to receive from our
angular service so the type of this is
going to be our interface type I
employee which we have imported from
this file next we're going to make use
of the activated route service provided
by angular to retrieve the parameter
value from the URL so let's import
activated route service from angular
router we also need employee service to
issue a service call
so let's include the required import
statement for employee service this
activated route is provided as a service
by angular so let's use this employee
component class constructor to specify a
dependency on that activated route and
the way we do that is by using the
constructor so here are notice we are
including a parameter to the constructor
of type activated route now at runtime
the angular injector is going to provide
an instance of this activated route
service for us so this is dependency
injection we will discuss dependency
injection in detail in our upcoming
videos for now understand that if we
specify a service as a dependency like
this using the constructor then the
angular is automatically going to
provide us an instance of that service
just like how we need this activated
route service provided by angular we
also need an instance of employee
service so we include that also as a
dependency using the class constructor
so within our employee component let
include a constructor that those two
dependencies next let's retrieve the
route parameter value from the URL and
then use that value to call our employee
service method let's do that within on
Annette lifecycle hook
so first let's import on a net lifecycle
hook from angular Co and then let's make
our class implement the lifecycle hook
and then within the class let's provide
the implementation for ng on a net
lifecycle hook method so within this
method we write the code to retrieve the
out parameter value first let's use this
activated route service for that so this
dot underscore activated round dot
snapshot we're going to use snapshot
approach to retrieve the road parameter
values there are different ways to
retrieve route parameter values we'll
discuss all those different ways and
when to use what in our upcoming videos
for now let's use the snapshot approach
so snapshot dot params and then we
specify the name of a parameter remember
the name of a parameter it is cold so
this name should match with the name of
the parameter that we have specified in
our route configuration so if you look
at this app that module TS forget the
name of the parameter here it's code so
this name should match that so we have
the route parameter value let's create a
variable here let's call it employee
code and this is going to be of type
string so we are using the variable to
store the route parameter value next
let's call the service method so this
dot under school employee service stored
get employee by code and this method we
pass of our employee code that we have
detail from the URL and what we are
getting back is an observable so let's
subscribe to the observable to subscribe
use the SUBSCRIBE function when the
observable successfully emits an item we
can specify a callback function so this
function is going to receive that
employee object
so let's use that to set this property
right here the employee property so this
dot employee equals whatever we get back
from the service and then in case if
there is an error then we can specify an
error callback function as well so when
there is an error what do we want to do
with that let's log the error to the
console so let's use the console
statement console dot log and let's
pause the error object to that and then
we want to display a generic error
message to the end-user instead of
showing him the actual exception for
that let's create a variable here let's
call it status message and this is going
to be of type string and then let's set
that status message variable to a
general message like problem with the
service please try again after some time
so at this point when the service
successfully emits an item that is the
employee object this property employee
will have that employee object next with
another employee component HTML file
let's include the required HTML to bind
to the employee object properties so
let's open our employee component HTML 5
which is right here and then here I'm
going to pay some HTML notice I have the
table element here and I'm using ng S
and an employee property so we are
binding to this employee property now if
employee property is truly meaning it is
initialized with an employee object only
then display this table element that's
what this ng F is telling here and then
we have the table head which basically
displays this header employee details we
have table body here and within every
row we have the title employee code and
then we are binding to the code property
of the employee object similarly we are
displaying name gender annual salary and
date of birth now we also have the
status message variable here if
something goes wrong we are setting this
property to
this message problem the service please
try again after sometime so if there is
any problem let's display this message
to the user and to do that let's use
another development right here after the
table element and let's use the NDF
structural detective on that equals not
of employee
so if employee is not Trudy then we want
to bind to this status message property
so whatever message we have in that
property will be displayed so with all
these changes in place let's run our
application by pressing control f5 we
see the home page now let's click on the
employees tab we see the list of
employees let's click on one of the
employee codes look at that nothing
happens it doesn't display anything so
let's launch browser developer tools and
investigate what's going on so we are on
the phones over there we've got one
error look at the error message right
here
no provider for employee service so
basically angular is complaining that we
have not registered employee service now
if you look at our employee component
notice we are injecting employee service
into this component but we have not
registered this service if you look at
our employee list component even this
component needs employee service notice
we are injecting it here and we are
registering the service using the
providers property of the component
decorator one way to fix this error is
by registering the service again with an
employee component by using the
providers property of this component
decorator by registering the service
twice we no longer get a singleton we
get two instances of this employee
service and that's not a very good
practice in our upcoming videos we'll
discuss what is the single done and why
is it important to register a service at
an appropriate level within our
application for now to fix this error
let's move the service registration to
angular module at the moment within our
application we only have one module that
is the root application module app that
module tortillas by registering its
servers within a module then
that service is available for all the
components within our application so
let's move the providers property from
our Employee List component to our app
module so let's open this app dot module
dot es we have the module decorator here
at ng module so let's use the providers
property here and register of our
employee service we also need to import
this employee service so let's include
the required import statement import we
want to import employee service and that
is present in employee folder and the
name of the file is employee dot service
let's save all our changes and reload
our webpage notice now we see the list
of all employees when we click on a
specific employee we see that employee
details let's click on another employee
and we see that specific employee
details now let's try to navigate to an
employee that does not exist we don't
have an employee with this code EMP 1:09
look at what happens it doesn't display
anything now what we want to do is
display a message saying employee with
the specified code does not exist to
achieve this within our employee
component we have this method right here
this arrow function is the one which is
called when the observable emits an item
so what we want to do here is include
the check for null so here we will check
if employee data parameter is now if it
is now then what we want to do is set
the status message variable that we have
right here to this message employee with
the specified employee code does not
exist so if it is null that means we
didn't get any employee back so we want
to just display this message to the user
else if it is not now then we want to
set the employee property with the data
that we get back
so that's format this a bet let's save
our changes and reload this page notice
now we see the message employee with the
specified employee code does not exist
we know we have an employee that
employee code 1 0 1 so when we provide
that employee code we should see that
specific employee details we have
another issue here let me explain what I
mean let's rebuild our solution so let's
go to the solution Explorer right-click
on the solution select this option to
rebuild so rebuild all started is going
to take a few seconds to rebuild the
solution rebuild all succeeded as you
can see here
now let's issue a Request notice we want
to see employee 1 0 1 that's the
employee code we have in the URL
so let's reload this page now this is
the first request after we have rebuilt
the solution so the application is busy
being JIT compiled so it's taking some
time to load data but at during this
wait time you're not displaying any
message to the user so the user is in a
confused state is the application
working not working now it would have
been much better if we have displayed a
message saying loading data please wait
when the data becomes available it
automatically appears on the page as you
can see right here so let's see how to
display that status message to display
the status message what we can do is
initialize this field right here status
message to that default message loading
data please wait so while we are waiting
for the data to load this is the message
that will be displayed to the user so
let's save our changes and reload this
webpage
notice now it displays loading data
please wait and then the data appears as
expected at the moment we are using hash
styles outing let's also test this with
html5 routing to enable html5 routing
back let's go to app dot module dot es
file and we just remove this property
right here use hash trim and within our
web config file let's enable the rewrite
rule that we have so the moment our URL
rewrite rule is commented here so let's
uncomment this and run our application
one more time by pressing ctrl f5 notice
now we have html5 style routing instead
of hash Stiles outing let's click on the
employees tab we see the list of
employees let's click on one of the
employees and we see that specific
employee details as expected thank you
for listening and have a great day