Send Data via HTTP using Angular HttpParams

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