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.

1450 questions
0
votes
1 answer

Angular 4 HttpClient not setting params or headers

Not sure what I'm doing wrong here. The code is pretty simple. import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs/Rx'; @Injectable() export class…
Justin
  • 859
  • 4
  • 15
  • 30
0
votes
1 answer

Angular 5 new immutable HttpClient breaks dynamic URL params

I have not worked too much with immutables in Typescript but the new Angular update has me stuck. I tried updating my own Http service with the new Http lib. Now I cannot dynamically add url parameters to Http GET requests. The issue is explained…
mchl18
  • 2,119
  • 12
  • 20
0
votes
1 answer

return array is undefined in angular 4

I'm getting data from web service and trying to use toPromise in my service.web service returns below json object. [ { "username": "jack", "joinDate": "2017-10-28T00:00:00", "expireDate": "2017-10-31T00:00:00", "isActive": true, …
Jobs
  • 269
  • 2
  • 6
  • 21
0
votes
1 answer

Changing a component's attribute un subscribe method

I am currently developing an Angular 4 app. I am using a restful web service to get data from the database. I created a front end service called UsersListService which has a method which returns an observable to which I have subscribed in my…
fbm
  • 245
  • 1
  • 5
  • 14
0
votes
1 answer

angular 4 service constructor issues

I have an issue with my authservice. If I make a http request inside constructor it is called 259 times. If I remove the http call it is called one time. I use a shared module to provide a unique instance of that service. Angular version:…
Verso Alex
  • 11
  • 1
  • 2
0
votes
2 answers

Angular 4 omitting HTTP error codes

I have an api call like this: this.http.get(url) .subscribe(results => { ... }, (err: any) => { console.log('raw error =>', err); }); The error on Chrome shows 502 (Bad…
rbasniak
  • 4,484
  • 11
  • 51
  • 100
0
votes
2 answers

RXJS - IntervalObservable with .startWith

I have implemented http pooling in Angular app with IntervalObservable and startWith to start instantly. I wanted to know does IntervalObservable wait until initial/previous call finished streaming data? Is there a better way to implement data…
Dev8055
  • 33
  • 6
0
votes
2 answers

How to process angular 4 HttpClient's response in the service and notify component

I was wondering, how can I easily notify a component about the http response (success or error) by using the new HttpClient (angular 4.3+ from @angular/common/http) after the response was processed (token saved) by the service. Earlier, I was using…
phev8
  • 3,493
  • 2
  • 13
  • 23
0
votes
1 answer

Angular HttpClient Typechecking Post Request's Repsonse

Is it possible to use type checking for POST (and type of other requests) with the new HttpClient in Angular (4.3+) as well? The official documentation (https://angular.io/guide/http#typechecking-the-response) only mentions GET requests: interface…
phev8
  • 3,493
  • 2
  • 13
  • 23
0
votes
2 answers

Angular 4 how to request a web page content as a json object

I am trying to request a web page with a http call and harwest the data. I could avoid the cross-origin with a chrome plug-in but still when I make the request, the response is always "null". How could I fetch a html page inside my angular app as…
tlq
  • 887
  • 4
  • 10
  • 21
0
votes
1 answer

angular 4 HTTP Client casting type response

In my angular 4 project I am using HTTP Client, when I have a GET call the response is sometimes articulated so I have to do something like: this.loggedUser.name = response._embedded.agent.name But in this case I have this error: Property…
Alessandro Celeghin
  • 4,039
  • 14
  • 49
  • 95
0
votes
2 answers

Angular4 doesn't send post data

Angular HttpClient doesnt send data to controller. I get a error 500 (because username in controller is null) when i try to execute fun(). test.sevice.ts import { Injectable } from '@angular/core'; import {HttpClient} from…
-1
votes
0 answers

How to resolved ERROR Error: Uncaught (in promise): Error? When I run prerender command in Angular Terminal then I got this issue

When I processed the PRERENDER process in console for generating static pages for firebase website deployment that time my subpages' SEO meta tags and page contents not generate the data as per page contents. but all my page data is still in the…
-1
votes
0 answers

Xero connections API working fine in postman with Authorization header but not with the angular httpClient using same Authorization header

Get API from Xero https://api.xero.com/connections is giving CROS / unknown error in angular httpClient get call with the same Authorization header bearer token, but in post man it is repsonding with tenent details. I tried using localhost http and…
-1
votes
1 answer

How to store httpClient.get data and use it after read

I have been trying to read a text file and store the data and use it later but once the scope of variable is over the variable gets cleared. I have been trying to utilize the data throughout the project and tried to create a global variable but…
ronKing28
  • 1
  • 1