Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Send Data via HTTP using Angular HttpParams

    Juri StrumpflohnerJuri Strumpflohner

    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.

    angularAngular
    4 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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...

    Discuss

    Discuss