Hello, everyone, and welcome back.
In this lesson, we are going to continue to extend the EPA of the crisis service and we're going to
have it, a data modification method we have here in the title input works that allows us to change
the title of the current course.
We are going to take the new value of the title and we are going to send it to the back end using an
IEP call.
Let's start by defining here the EPA of the service where we are going to implement these data modification
operations we are going to have here and new methods and we are going to call it safe course.
We are now going to define one parameter of type course.
Now, let's call these EPA here from our application component.
Let's switch here to the template and see that we need to detect here the event three years whenever
we hit here, the safe course.
But then if we expect this version of the cost curve, we're going to see that we have here a course
changed event.
So this code version is slightly different than the one that you have built previously.
In this course, we are going to detect this event.
And this event, as we can see, is going to be emitting the course that it receives this input.
So the course linked to the car containing the modified title.
So as you can see, we have used here the objects press operator and we have created a copy of the course.
Then we have overeaten.
Only the description property, the description property is coming here from on Save Click and it corresponds
to the value of the course title input box.
So here it is, the edit title input box we are going to grab here.
It's value pass to on save click and from here we are going to emit these inner course changed object.
This means that going back here to our application component, we simply have to subscribe to this course,
change the event and react to it by calling here a method on our application component.
We are going to call this method simply save.
This is going to take as input a course and this is going to be received here from the changed event.
We are going to call here the save method and we're going to pass it.
The course emitted by the event, which is available via the Doppler event variable, as we have seen.
So now inside here, our save method, we are going to be able to call our coarsest service safe course
method and pass in here the course.
Let's now implement the save course method.
Here again, we are going to be calling the HTP clay and we are going to be doing an HTP protocol.
So the same way that we can do aget, we can do a post, can do a delete, and we can also do aput,
which is what we are doing here.
So here inside our protocol, we are going to be specifying the world that we want to hit.
So we are going to be hitting the URL, slash EPA slash courses, and here we are going to be specifying
the idea of the course which we have available via the course input variable of this method.
Notice that the program is not yet compiling, and that's because we need to pass in here a second argument,
which is the body of the protocol.
So now we have a compiling program.
We are going to just like before return these observable here as the output of C, of course.
And in order to trigger the safe course HTP request, we need to subscribe here to this observable just
like before.
So if we don't subscribe, nothing will happen and the course will not be saved.
Let's look here to the council that the course was saved successfully.
Let's now try results and confirm that everything is working as expected.
We are going to rename here to the title of the course.
Let's say that we are going to call it angular core course.
We're going to hit save course and we're going to inspect here to the council.
So here at the bottom of the console and I'm going to click Save Kosygin, we can see that we are saving
this course to the back end.
And if we head over here to the terminal, we're going to see here that in the window that is running
our small HTP rest server, we're going to have confirmation that we are saving the course to the back
end.
Now, notice what happens if we re lower the application instead of angular deep.
They've we have the new title, angular core course.
So this confirms that our request was correctly processed and the new data was saved in the server as
expected.
Now, let's say that in this put request that we are doing here, Insaaf course, we would like to specify
a customer behavior.
Let's say that we needed to add to these requests and authentication here that is identifying the user
so that the server can know if the operation is allowed or not.
So in order to do that, we are going to define here a new constant.
You're going to call it headers, and these will contain our HTP headers.
We can.
Our HTP Heather's in a very similar way to how we were building our HTP parameters using a class called
HTP, Heathers D class also has an immutability based API.
So we are going to call here our set method and we are going to specify here the name of the custom.
Heather, we are going to follow a convention and prefix with an X that the custom Heather.
We are going to call it the off indication, Heather.
And let's say that we will have the value of a cookie that would allow us to authenticate this user.
Then we would specify here the user idea now that we have here some headers already present, we need
to pass them here to our people to request.
We are going to do that here via the first argument of the put call into an object.
And here we have several options available.
In this case.
We are going to specify the headers property and we're going to pass it.
This instance of HTP headers, let's now confirm that our HTP here is being properly filled in.
We want to switch to a larger window relo of the application and we are going to perform here another
safe call.
We are going to clear here the console and let's rename this to the angular core.
Deep Dive are going to save our course.
And here we have our put request if we click on it and we have a look here at the request, headers
will see that indeed we have here our custom, however correctly, filled in as expected.
As we can see, Angular makes it really simple to build our own custom injectable services.
This is all based on the angular dependency injection mechanism.
Now that we know how to build our own angular custom service, what we're going to do next is we are
going to do a deep dive into the angular dependency injection system.
We're going to understand exactly how this configuration here inside the injectable decorator works,
the provided in property and much more.