A simple guide on Angular HTTP Client

What is Angular Http Client?

Http client assists you to post and fetch external data seamlessly. This feature was introduced in Angular 6 to focus on security aspect of Angular applications. In general, we will go over how to use HTTP in Angular. Although we’ll be utilizing the new @angular/common/http module, much of this post applies to the prior @angular/http module as well.

We’ll show you how to utilize this module to implement some of the most typical uses you’ll come across throughout development.

What is HTTP module in Angular?

• The RxJS Observable-based API is present in all versions of the Angular HTTP module. This simply means a various HTTP module calls will return an observable, which we must subscribe to in some manner.
• Here are some important considerations to keep in mind while dealing with the HTTP module’s Observables:

1. Nothing will happen until we subscribe to these observables.
2. Numerous HTTP requests will be triggered if we subscribe to these observables multiple times.
3. Single-value streams are a special form of Observable. These observables will emit only one value if the HTTP request is successful, and then they will complete.
4. If the HTTP request fails, these observables will emit an error; more on this later.

• With that in mind, let’s look at some of the most common tasks we will encounter when working with the HTTP library.

 Installing the new HTTP module

• We must import the HTTP module into our root module HttpClientModule: in order to use it:

 Example of an HTTP GET

• Here’s an example of a tiny component that uses an HTTP GET to query the database above and displays the results on the screen.

• The HTTP module is used in this example to display a list of courses in a tiny component. Let’s have a look at this case in detail:

1. We are using the new HttpClient client module, injecting it into the constructor.
2. The get () method is then called, which returns an Observable.
3. Because this observable returns an Object by default, the HTTP library assumes we’ve queried a JSON API and parses the HTTP response body as JSON internally.
4. To avoid an attack known as JSON Hijacking, we normally build our APIs to always send an object rather than an array.
5. As a result, we must turn the object into a list by extracting only the object values.
6. The HTTP observable will be subscribed to by the async pipe, and it is this implicit subscription that causes the HTTP request to be made.

• As a result, all of the courses in the database’s descriptions will be shown on the screen in a bulleted list.

HTTP Headers

• We may use the HttpHeaders class to add custom HTTP Headers to our HTTP request, in addition to the headers that the browser currently attaches automatically:

• As you can see, HttpHeaders provides an immutable API as well, and we’re sending a configuration object as the second argument to the get () method.
• We used the object short-hand creation technique to define the configuration object because it only has one attribute named headers, exactly like the local const we defined.

HTTP Put

• We can use the Angular HTTP Client to do all of the other accessible HTTP methods, including the methods commonly used for data change, such as PUT, just like we do with GET.
• Only use the PUT technique if we wish to completely replace a resource’s value. If we wish to overwrite a course object with an entirely new version of the same course object, we’d use PUT.

• This sampling method could be included in a component class, for example. We’d see the following output in the console if we triggered it with a click handler in a button:

• As we can see, even though we normally only want to change a few properties, the PUT function will replace the entire content of the course route with a new object.

HTTP Delete

• Another common action we want to perform is to perform a logical deletion of certain data. This procedure can either delete all of the data in our database or only label some of it as deleted. Here’s an example of how we’d get rid of a course:

• The following results in console:

HTTP Post

• If the action we want to perform does not fit into any of the preceding methods (GET, PUT, PATCH, DELETE), we can use the HTTP wildcard modification operation: POST.
• Although there are numerous other uses for this procedure, it is most commonly used to add new data to the database. For example, here’s how we’d use it to add a new course to the database:

• We normally want to return the unique identification of the data that we just produced when we use the POST method to create data in the database so that the client can access that new resource if needed.

Conclusion

In this blog, we discussed the HTTP Client feature of the Angular framework and how to use HTTP Client in angular projects practically.