A string within the view there, that's it.
You can do a more elaborate way of displaying the error message if you so
wish to.
But all that I'm going to do is if there is an error,
I will simply show error on the screen and then display an errMess.
You can even style it by changing the color to red and
so on, but I'll just leave it like that there.
So, with this, we will end up displaying the error message in the view here.
The same procedure can also be used with the dish component and
also the home component where we are accessing the dish service.
So going to the dish component, am going to do exactly the same thing,
so within the dish component I will include the, ErrMess here.
And then right here within the subscribe,
this is where we are receiving the dish value.
So the first part,
what we have already included will be called if the observable returns a value.
But should it not return a value, then we need to deal with the error message.
And we'll use exactly the same
error message function that we have defined earlier in the menu component.
So, we will say that this.errMess
= Ermess here.
That's it, so my dish component is now updated.
So I need to update the dish component's template file.
So going to the template file,
we see that we are going to be displaying the dish if dish is not null.
And then down below here, we are handling the situation
where we'll show the spinner if the dish is null.
So let me add in also, if the error message is not null then I should
be displaying error message rather than the dish here, right?
So, let me go ahead and
copy the code from the menu component.
I'm going to use exactly the same code for
the dish detail components template file also.
So, right there.
Let me go ahead and insert that code here.
So we see that if errMess is not null,
then this error will be displayed in the view there.
Now same thing,
going to the home component we need to go through the same procedure.
Now within the home component, of course, we have dish, promotion, and leader.
So I'm going to define separate, Strings for
each one of them because the error could arise from any one of the three.
Right now we're only dealing with dish being fetched from the server side.
The remaining two I will expect you to do that as part of the, Final assignment.
So we'll, I'll say dish errmess string and then go down into the code here.
And in the code here,
we'll simply say errmess.
This dish errmess = any
errmess, that's it.
And similarly, update the home components template files.
And going to the home components template file,
we see that we have the dish bin displayed there,
so now for this one I should say or dish errMess.
And then, down below here, I will include the code
that I have copied from the menu component, and
then I update it to dish ErrMess here.
And also, update this to dishErrMess here, that's it.
Let's save the changes.
Going to the browser, you see that everything works just like before.
The home, the menu component and also the dish detail component without any problem.
Now the question is, how do we cause errors?
To cause errors, one possible way that we can deal with the issue is we go and
seek a nonexistent information from the server.
Let me go to the dish service and then cause
my first problem in the dishService here.
So for the featured dish instead of dishes, let me make a mistake and
say dishees and then save the change.
Obviously that means that this url doesn't exist.
So, what will happen if it access the server?
Going to the browser when we now scroll,
you see that the dish is not being displayed here.
It says here Error 404 Not Found.
This is because we are trying to access the dish information at
the URL dishees which doesn't exist on the server side.
So you see how the error message is being displayed here.
Of course, you can be a bit more fancy and do more work around this and
then display the error message in a more meaningful way.
But the basic principle is highlighted here saying that you
can show an error message if something is not properly executed
when you are trying to access information from your server side.
Of course, so this is an artificially created error in my application.
To cause yet another kind of error, I have gone to my terminal window and
then shut down the server to see what my Angular application will do in this case.
So after shutting down the server,
let's see what the home component will display in its view.