We have already seen the use of the HTTP get operations in the previous two exercises,
where we will able to go and fetch the data from
the server and use it within our Angular application.
But there are situations where you want to be able to post new data to the server,
or to modify the existing data on the server,
or even delete the data.
So that is where the post,
put, and delete operations of HTTP enable us to carry out this.
In this exercise, we're going to look at the use of the put operation from
HTTP client which enables us to modify an existing dish on the server side.
Now, why would we need to do that?
You saw that in one of the previous exercises,
we allowed the user to post a comment to a Dish,
and then we were able to insert the comment into the Dish object.
Now, we want to persist this dish information onto the server,
the modified dish to the server.
This is where the use of the HTTP PUT operation comes to our rescue.
So, using the HTTP PUT operation,
we are able to send the modified Dish back to the server and then modify
the existing Dish information on the server so that
the newly added comment can be persisted on the server side.
Thereby, when the information is fetched at a later date,
the newly added comment will be there as part of the Dish information.
So, this is what we'll explore in this exercise,
where we'll look at saving changes to the server.
So, how do we go about doing this?
Let's explore this in the exercise.
To enable us to be able to save the changes to the Dish to the server,
let me introduce a new method into the Dish service here.
Now, we will add a new method called as putDish to the server.
So, how does the putDish method work?
So, let me introduce the putDish method here which obviously receives the modified dish
as its parameter and then it'll return an observable of type Dish.
So, this will return the Dish that has been put into the server side.
Now, once the Dish is modified on the server side,
the modified Dish information will be sent back by the server,
and then this modified Dish will be delivered
back to the client so that the client can integrate that,
and then update the user interface to reflect the change to the Dish.
Now, obviously, we don't want to reflect the change to
the user interface until the Dish information is saved on the server side.
So, that is where we're going to be making use of
the putDish method that we introduce into the Dish service.
So, how do we design the putDish method?
So, the first thing that we need to do is to set up some HTTP options so that we inform
the server on what
is being sent in the message here.
So, we'll set up some headers information here.
So, for the headers, we'll set up new HttpHeaders here,
and in the new HttpHeaders,
let's set up the header as
Content-Type of the type application JSON.
So, we are specifying to our server that the incoming request message
contains the information in the form of
a json object in the body of the incoming request message.
So, the server will be able to extract
the Dish information from the body of the message, parse it,
and then be able to persist the modified Dish to the server,
and then send back the updated Dish information from the server side.
Now, once we have set up the options here,
then we will use
the HTTP client and then
do a put which obviously carries the Dish in the body of the message,
and then we'll specify baseURL+dishes and +dish.id.
So, that is the URL to which we are sending the put operation so,
baseURL+'dishes/ ' + dish.id.
So, from your REST API knowledge,
you'll see why we do a put operation to this end point.
Then the second parameter is the Dish itself which we
receive as the incoming parameter to the putDish method,
and then the third parameter is the httpOptions that we just set up a short while ago.
Then, once we obtain that,
then we'll be able to pipe
the any error to our handleError method hear, that's it.
So, this call to the put on the server side will enable
the Dish information to be persistent on the server side and then the server
will return the updated dish information back to us,
and then we will return that back to our component
where the component can then use that to render the updated Dish information.
So, this is the modification that we do to the Dish service.
Now, go into the dishdetail component,
in the dishdetail component,
let me introduce one more variable here
called dishcopy which will hold
a copy of the modified Dish until it is posted to the server.
So, the dishcopy will contain the modified dish.
So, going into the route parameters here.
So, what we do is anytime the Dish information is modified here in the route parameters,
also along with saving the dish information to this.dish,
I will also save a copy to
the dishcopy also so that both the Dish and
the dishcopy contain the exact copy of the same Dish here.
So, that's the modification that we will do here.
Now, in the onSubmit method,
so here we have the onSubmit method here,
where we are modifying the object here.
So, here, you notice that we were originally pushing the comment to the Dish object here,
instead, we will now push the comment to the dishcopy object.
The reason why I'm doing this is that I want to first modify the dishcopy object,
then I want to post that to the server,
and then when the server replies back with
the modified dish information to the server side,
then I will persist that information into the Dish here.
So, after doing the dishcopy here,
then we'll say this.dishService.putDish,
and then we will supply to the putDish
the dishcopy as the parameter
because the dishcopy contains the modified version of the dish here.
So, we'll say dishcopy,
and then when we receive the reply from the server side so,
in the subscribe, we'll say Dish and right there,
we will handle the incoming Dish here.
So, in here, we'll say subscribe Dish and then we'll say,
this.dish equal to dish here,
and for the sake of completeness,
I will also persist the same information into the dishcopy here.
Now, if there is an error,
then will have to handleError.
So, to handleError, we'll say,
errmess, and then at that point,
we'll set that this.dish to null,
and then the this dishcopy also to null because right now the dish is not valid,
and then we'll say this.errMess is
any errmess, that's it.
That's the modification that we're going to make to the onSubmit method.
So, by using this.dishService.putDish method,
we are sending in the updated dishcopy here,
not the Dish here,
and then when the server replies back to us with the modified Dish,
at that point, we will persist the information into the this.dish.
So that at that point,
our UI will be updated with the updated version to Dish,
I'm also persisting the same information to the dishcopy,
and then if I encounter an error,
then I will set the this.dish to null and the this.dishcopy to null
and then set up the error message appropriately here.
So that's it. Let's save the changes and then go and
take a look at our application in the browser.
Saving the changes, let's go back to the browser.
Go into the browser, let's now go to the menu and then go to a specific Dish here.
For the specific Dish,
let's post a comment here.
So, let me post a comment here with a rating here.
So, as you see, as the comment becomes valid,
the preview of the comment shows up there.
Let's now submit this comment.
When you submit the comment,
you'll immediately see that the comment just got posted into my list of Dishes.
Now, earlier, if you refresh the view,
then this comment would disappear.
Let me now refresh the view and then you will notice that the comment will still
be part of the list of Dishes here.
So, as you can see here,
the comment still exists here.
To further show you that indeed the comment has been persisted on the server side,
let's go and look at the log of the server in the terminal.
Going back to the terminals,
we'll now see that in the log of the terminal,
you see a new PUT /dishes/0 method.
So, that shows that the modified Dish
has been persisted back to the server right there and the after that,
of course we got the dishes by refreshing
the UI and so that's why we're
fetching the dishes information again from the server side.
So, this shows that we are able to use
the HTTP PUT operation to persist the modified Dish to the server,
and then when we receive the updated dish,
we are able to update the user interface correspondingly.
With this, we complete this exercise.
This is a good time for you to do a GET commit with the message,
saving changes to this server.