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
-3
votes
1 answer

How to replace a token in the URL when calling HttpClient.get()

How to replace ${fooId} token in the URL when calling httpClient.get() this way : this.httpClient.get('http://my-server/foo/${fooId}'); Actually I'm using this.httpClient.get('http://my-server/foo/${fooId}'.replace('${fooId}', fooId)); but I think…
Ghassen
  • 421
  • 8
  • 21
-3
votes
2 answers

How to wait for different http requests to receive a response (suggestions)

In my app I need to do a lot of http calls before starting to create some objects... So only when all the http requests have received the results from the servers, I can process the all the result and construct my page... To accomplish that I have…
navy1978
  • 1,168
  • 1
  • 11
  • 28
-3
votes
3 answers

Unable to call POST from Angular UI Give 405

I know there are already like 100's of question but posting it as they are not solving my problem So, I have a multichain network setup which is up and running. We have API's to access the network .The problem is i am able call POST request from the…
Vishesh
  • 2,798
  • 4
  • 18
  • 32
-3
votes
2 answers

Build pipes with multiple async HTTP requests

I need to make first HTTP request and get from response array of object. Then I need to make HTTP request for every object in array (probably in loop) to get extra info. All this inside Angular. I try with pipes but have some difficulties.
Darien Fawkes
  • 2,593
  • 6
  • 21
  • 34
-3
votes
2 answers

How to access error response body inside of an interceptor?

I use interceptor to sniff all HTTP requests/responses. How to get body response in case when server returns http 400, Angular raises an exception and in catch block I can not get body message: return next.handle(request).pipe( …
OPV
  • 1
  • 16
  • 57
  • 124
-3
votes
3 answers

How to pass a simple integer parameter in HTTP GET request?

I have the following code in my component, which is supposed to send an id to the WebApiController and fetch back some data. But I can't simply pass the parameter to the method. I have tried many of the solutions available here and there, but no…
kevaljarsania
  • 97
  • 1
  • 8
-4
votes
1 answer

Fetch previously requested URL in Angular

Is it possible to fetch previously called XHR request URLs (which used Angular's HttpClient)? I'm willing to use the Interceptor. How can that be done? Pointing in the right direction might be just enough. Having basic functionality like fetching…
Munchkin
  • 503
  • 1
  • 7
  • 25
1 2 3
85
86