Obviously in a real world application we do not only fetch data from the backend, but we also send data to be stored permanently on the server side. The
HttpClient gives us different options for achieving this. In this lesson we will look at how to attach parameters to our request URL, by manually concatenating the URL by ourselves, by using the
HttpParams object and also how we can send entire objects in a
POST request body.
In this example, we are executing an HTTP get request to some endpoint here for retrieving the data. So if I click this button, we can see how the data gets rendered by our component on the Y.
Besides fetching data, we obviously also want to send data to our backend. Even with a so-called get request, we can send some data. For instance, we could include here a filter and say we only want people with the ID 123. Now if we save this and open the tools in Chrome and then open the network panel, execute request, we can see how our parameter gets attached to the URL, and therefore the server can then read this out and deliver back the according result.
In Angular, there are different possibilities for including such parameters in the URL. This is one way. However we could also here use the options object and use the parameters property and specify here new HTTP params, set ID value 123. This also needs obviously to be imported from the Angular common HTTP package. Now if I save again, now if I resend the request here, we can see that the behavior has remained the same.
While this is not so interesting in this case, we might for instance want to send several parameters where the new HTTP params object here actually comes quite handy. So we can say something like params new HTTP params just as we've done before. We say set like you want to filter for ID, should be 123, and maybe also set parameter include address let's say true. Then obviously below here, we use that new params object.
Now if we again execute a request, we can now see that the parameters get automatically concatenated. We get here the question mark and then the further parameters are concatenated and sent to the server.
Up to now, we have only seen so-called get requests which are designed to fetch data from the server, so they don't actually change the state on the server side. However, in real world applications, we also want to change the state.
For instance, we have a person or we want to create a new person. Let's say new person equals name Pete. We want to send that new person to the serve side. For those scenarios, we don't execute get request but rather we use the so-called post request or a put request in case we want to update an existing entity.
In this case, let's use post. We can use the same API here. As a second parameter here, we don't have the options object, which in this case would be the third parameter, but rather we have here the body. In our case, the body is basically the object which we want to send to the server side. So we can say here new person.
If we now send the request again, we click here on people object. We can now see that the request method is post just as we expected to the same URL. Here further below in the request payload, we can see the object that gets sent to the server...
Im trying to follow along but your code is missing the proxy.config to allow the cli and express to work together. The code base seems to change every lesson BTW
Hey Stephen. Indeed, seems like the linked Plunker example isn't even the correct one for the lesson. Will contact the Egghead team and fix this.
Meanwhile you can use the GitHub companion repo for following along: https://github.com/juristr/egghead-learn-http-in-angular/tree/send-data-to-server.
I structured the repo with different branches that should be properly linked via the README.
The code base seems to change every lesson BTW
Yes, that might happen sometimes as the lessons might have been added later to the course as they're also intended to be consumed completely standalone. I'm sorry if that creates confusion for you. If you're stuck somewhere, feel free to ping me here or on Twitter (@juristr)
Thanks, I actually figured it out from the cli docs! A really cool feature!
Yep indeed, very useful. We continuously use it in development 🙂