Questions tagged [angular-httpclient]

Angular HttpClient is the new HTTP client of Angular since version 4.3 from the @angular/common/http package. It is an upgraded version of the former @angular/http package. Unlike the former deprecation, HttpClient responses can be typed and are JSON parsed automatically. You can also use interceptors on the immutable response and request.

The HttpClient class from @angular/common/http (which was introduced in Angular v4) is the newer implementation of the deprecated former Http class from @angular/http.

HttpClient provides the ability to specify the return type of an HTTP request. See below for an example:

export interface Food {
  name: string;
  type: 'fruit' | 'dairy' | /* ... */;
}

// ...

@Component({ /* ... */ })
export class AppComponent {
  foods: Observable<Food[]>;
  constructor(private http: HttpClient) {
    // Specify the return type using the first union type
    this.foods = http.get</* specify return type here */Food[]>('https://example.com/foods.json');
  }
}
<ul *ngFor="let food of foods | async">
  <li>
    <p><strong>Name</strong>: {{ food?.name }}</p>
    <p><strong>Type</strong>: {{ food?.type | titlecase }}</p>
</ul>

foods.json:

[
  {
    name: 'Banana',
    type: 'fruit'
  },
  {
    name: 'Apple',
    type: 'fruit'
  },
  {
    name: 'Milk',
    type: 'diary'
  },
  ...
]

It also adds the ability for HTTP interceptors, which:

...inspect and transform HTTP requests from your application to the server [and vice versa] - Angular - HttpClient

See Write an interceptor for more info.


For more detailed documentation about the HttpClient, see the Angular - HttpClient guide.

1282 questions
14
votes
1 answer

Angular 6 Get response headers with httpclient issue

I'm using the code below to try to extract a value (ReturnStatus) from the response headers; Keep-Alive: timeout=5, max=100 ReturnStatus: OK,SO304545 Server: Apache/2.4.29 (Win32) OpenSSL/1.0.2m The code; import { Injectable } from…
Mark Beynon
  • 265
  • 1
  • 3
  • 18
14
votes
4 answers

Angular 5 Jasmine Error: Expected one matching request for criteria found none

I have a very simple service call and a jasmine test for it. Service call: myServiceCall(testId: number) : void { const url = `${this.url}/paramX/${testId}`; this.http.put(url, {},{headers: this.headers}).subscribe(); } My Test…
mrkernelpanic
  • 3,456
  • 3
  • 22
  • 46
13
votes
2 answers

Angular 5, HttpClient changes Date fields to UTC

I Have an object which has a Date type property on client side. When I try to send object via HttpClient.post to server, property's value changes to UTC timezone. On client side value is Sun Nov 26 2017 00:00:00 GMT+0300 (Turkey Standard Time) but…
h.jalilzade
  • 257
  • 2
  • 14
12
votes
5 answers

How to get body from HttpErrorResponse in Angular 6?

I have created a REST API call in my Angular app which downloads a file. I am setting responseType to 'blob' since I am expecting a file in response. But when there is no file available at the server the Response has a error code as 404 i.e Bad…
Nitish Kumar
  • 541
  • 1
  • 6
  • 20
12
votes
1 answer

Which RxJS operator to choose to handle HTTP errors: tap or catchError?

/* error handler that will be used below in pipe with catchError() * when resource fetched with HttpClient get() */ private _handleError (operation: string, result?:T) { return( error: any): Observable => { console.error(…
yactouat
  • 165
  • 2
  • 11
12
votes
2 answers

Order of HttpInterceptors

I have a application that uses a plugin that register a HttpInterceptor. Now I need to create my own interceptor that need to be run before the other interceptor because it will change some values, in localStorage, that the other interceptor…
Fernando
  • 1,905
  • 3
  • 24
  • 43
12
votes
3 answers

Angular - Interceptor not loading in a lazy loaded module

I have created an interceptor which appends a token to the authorization header only needed for API calls made within a feature lazy loaded module. However, I don't think the interceptor is being called as no console.logs are being displayed when…
Kay
  • 11,044
  • 31
  • 100
  • 173
12
votes
6 answers

Angular 5 - Can't set header for HttpClient

I am trying to make a POST call using HttpClient in an Angular 5 project, and I want to set the header: import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { AuthData } …
Enrique Moreno Tent
  • 21,095
  • 29
  • 89
  • 173
12
votes
3 answers

Multiple Objects into HttpParams

I have some categories in a formcontrol, I send them in an array of string like this: [1,4,6] And that is my actual code: let categoryIds = new Array() this.selectedCategories.forEach((value: string, key: string) => …
Juanker
  • 696
  • 1
  • 9
  • 18
12
votes
2 answers

How to add HttpClient Interceptors conditionally in Angular

Recently I have been using Interceptors with Angular HttpClient. I add headers corresponding to some HTTP GET methods and for some I do not need those headers. How can I tell my interceptor to conditionally add interceptors to only those methods? I…
10
votes
7 answers

How to Show spinner for every HTTP requests in angular 5?

i am new to angular 5 . How to code a common function to show spinner for every HTTP request in angular 5.Please help me to implement this.
10
votes
2 answers

Angular 5 HttpInterceptor Error Handling with calling the error handling of the caller first

I have a global HttpInterceptor with a catch block which handles an HttpErrorResponse. But my requirement is that when a service makes the http call and also has an error handler i want the error handler on the service to go off first. If there is…
Nani
  • 501
  • 1
  • 5
  • 6
10
votes
4 answers

what happens if we does not subscribe to HttpClient request which return observables in angular

I am new to Angular & typescript , trying to understand HttpClient, observables & subscribe When i do this in a function of a component console.log(this.http.get('assets/user.json')); I am receiving an object but can not see any request going to…
Kuldeep Dangi
  • 3,350
  • 4
  • 28
  • 50
9
votes
3 answers

Angular 6 Redirect to external url using POST

I am trying to incorporate payment gateway into angular app, I found following JavaScript snippet provided by the payment partner for incorporation, I tweaked it by adding ngNoForm and got it working with angular; stackBlitz
Saif
  • 1,426
  • 2
  • 18
  • 40
9
votes
4 answers

Angular 4 How to return multiple observables in resolver

As the title states, I need to return multiple observables or maybe results. The goal is basically to load let's say a library list and then load books based on that library IDs. I don't want to call a service in components, instead I want all the…
hxdef
  • 233
  • 5
  • 13
1 2
3
85 86