Angular 2 http error handling Video Lecture | Angular 2 tutorial - Front-End Programming

this is per 28th of angular 2 tutorial
in this video we'll discuss error
handling in angular this is continuation
to part 27 so please watch by 27 before
proceeding in our previous video but
discuss how to use HTTP Anglet servers
to call a remote web service when using
HTTP to call it a moot web service
variety of things can go wrong and
errors may occur when errors occur we
want to handle those errors to handle
errors we use the catch operator so the
first thing here to do is just like how
we have imported map operator let's go
ahead and import catch operator from
rxjs next let's change the catch
operator to the map operator using dot
like this and this operator
let's pass another method as a parameter
we call this method handle error we
don't have this method yet so let's go
ahead and create this new method handle
ever this method will be called whenever
there is an error and the error object
will be passed as a parameter to this
method that's called it ramita error and
if you recollect from our previous video
the get method of our angular built-in
HTTP servers returns an observable of
response notice from the intelligence
the return type even when there is an
error the error object type is going to
be response so let's set the type of
this error parameter to response now
what do we want to do with this error
object in a real world application we
may pass the error object to a logging
service to log it to the database table
or a file so the development team can
review the errors and fix them if
required in our case to keep things
simple let's login to the browser
console log something to a browser
console we can either use console dot
log or console dot error this is an
error we want the color of the message
to be red so let's use console dot error
instead of console dot log and notice to
the
error method bypassing the error object
that we want to log to the console next
we want to display a meaningful error
message to the end-user now this is a
service usually services doesn't have
user interface elements associated with
them so there is no way to display a
meaningful message to the end-user
directly from this service instead what
we can do is through that error back so
any component that subscribe to this
service and notify about this error so
that respective component can handle the
error and then display meaningful
message to the end-user so let's throw
the error back and to throw the error
back we are going to use observable dot
throw and to the true operator P pass
the error object so this is going to
throw that error back we are calling
this employee service from our employee
list component so button our employee
list component we need to handle the
error that we are throwing from this
service and then display a meaningful
error message to the end user notice
within ng on a net we are subscribing to
the employee service and notice the
first parameter to the subscribe method
this method is called whenever the
service successfully emits an item and
whenever there is an error we can
specify a second function right here and
this function will be called whenever
there is an error let's pass the error
object as a parameter to the second
error function and what I'm going to do
is create another variable within our
component class let's call this status
message this is going to be of type
string and then within this error
function let's set the variable to this
message so this is the message that we
want to display to the end user problem
with the service please try again after
some time now within the view template
of our employee list component we have
this TR right here which displays the
message
loading data please wait we display this
message to the end-user when the service
is busy loading data now instead of
hard-coding this message let in the view
template let's move it to this property
within our component class status
message so let's set its default value
to this loading data please wait and we
know whenever there is an error this
error function is called and this
function is setting that variable to
this message problem with the service
please try again after some time now
let's bind to this property within our
butan plate so let's use interpolation
for that and bind to status message
property so let's save all our changes
now and reload of a page at the moment
we don't have any errors so the data
loads fine and the application works as
expected now let's introduce an error
clinician let's change the service here
to include an extra s there let's save
our changes and then let's reload of
webpage notice now we see the message
problem this service
please try again after some time notice
within this service we are logging the
error to the console so let's launch
browser developer tools and here is the
response that is logged to the console
notice because we have changed the URL
to include and extra s here it says for
therefore not found now we are throwing
the error from our service but then
within our employee list component
they're not doing anything that that
error by simply setting this variable to
MSH problem with the service please try
again after some time now within our
employee list component also let's log
the error object to the console and see
what happens so let's use console dot
error and then to the error method let's
pass our error object let's save our
changes and reload of webpage
notice now we get a completely different
error message observable underscore one
dot observable dot throw is not a
function this is because if you look at
this piece of code right here within our
employee service to throw the error
using the true method but we have not
imported it from observable but it
worked fine all this while but then the
moment we included this code here button
on employee list component to log the
error to the console that's when we are
seeing this error message to fix test
all we have to do is within our employee
service where we are using the throw
method we will have to import it from
our X J's observable like that so let's
see or changes one more time and free
loader webpage notice now the error
response is locked to the console twice
once by the service itself and once by
the employee list component so to handle
errors these are the changes we have
done within our employee service and
here are the changes within our employee
list component thank you for listening
and have a great day