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

Angular - Parse nested JSON

I have an Angular 12 application and am getting back a complex type, which I have mapped to interfaces. When I console.log this object, I see the values I am expecting, however trying to log the members array here comes back as undefined. My…
Patrick
  • 5,526
  • 14
  • 64
  • 101
-1
votes
1 answer

Angular - Cannot read properties of undefined (reading 'forEach') by trying to manipulate variable after an HTTP call

I'm trying to manipulate a variable after an HTTP call. I want to use functions such as .push() or .forEach(), but it doesn't allow me because data isn't assigned to the variable at first. I get an error in the console: Cannot read properties of…
-1
votes
1 answer

Can't make a x-www-form-urlencoded POST in Angular

I have a working POST and GET service and see no issues with CORS or such. However, I simply fail to mimic the call performed in Postman (where it works) and the only thing I can imagine is that I somehow set the x-www-form-urlencoded format…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
-1
votes
1 answer

Inspecting/Modifying RxJS Observable instance

I have the following typescript method private processRequest(request: Observable, ...): Promise {...} request is an HttpClient Observable processRequest(httpClient.get(url, ...)); ... processRequest(httpClient.post(url, ...)); ... Is it…
Franco Tiveron
  • 2,364
  • 18
  • 34
-1
votes
1 answer

Kubernetes Microservice development with angular http client and flask doens't work

I have a problem and I have no more ideas what to do. I want to set up a microservice based app on Linode with kubernetes. I have an Angluar app (running on the same cluster and the same node) already deployed there, and it works fine, from this…
-1
votes
1 answer

I get HttpErrorResponse error when logging in on angular 11. Status 200

I am getting an error like this. Couldn't find the solution. login(signInRequestPayload: SignInRequestPayload): Observable { return this.httpClient.post( '/api/v1/registration/login', signInRequestPayload) …
-1
votes
1 answer

HTTP POST request in Angular

I am creating a POST quest in Angular and have the following setup in the code const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', }) }; The below send 'Credentials' which is the following format class…
Alpesh
  • 31
  • 1
  • 10
-1
votes
1 answer

Angular with PHP backend

i will combine an angular app with a php backend - but somehow my variable "intrologos" is shown as 'wrong' ... the "intrologos" befor the ":" ... additionally thr "res['data']" is shown as false ... export class IntroLogosService { baseUrl =…
Manuel Weitzel
  • 101
  • 1
  • 1
  • 13
-1
votes
2 answers

In Angular, how do I prevent concurrent requests from being blocked?

I'm using Angular 9. I invoke an HTTP endpoint a number of times, using the loop below…
Dave
  • 15,639
  • 133
  • 442
  • 830
-1
votes
2 answers

Retry a request for a number of times in Angular app

I have this situation where I need to make a get request. I do know how to use Angular's http client, but I need to make the request retry automatically if it fails, for a number of times before giving up and throwing an error, and also I need to…
Elmehdi
  • 1,390
  • 2
  • 11
  • 25
-1
votes
1 answer

Piping inside a pipe voids tapping in the outer one in RXJS during a get call in Angular

I noticed that some of my tap(...) invokations won't log to console, so I investigated further and found that an inner piping seems to kill off the outer piping. For instance, the code below, will show inner but won't show outer. return…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
-1
votes
1 answer

Adding headers seems to fail based on the response from server in Angular HttpClient while working in Postman

When I check a call in Postman, using the single header INFO added with value of blopp, I get the result as expected (it's JWT containing the value passed in as sub, a bit dummy service, agreed on that). When I deactivate the header, I'm getting a…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
-1
votes
1 answer

Proper way to approach observe in HttpClient of Angular (by the book)

In the docs for HttpClient, there's a mention of HttpObserve. However, when I Google for it, it seems (based on different blogs and forums) that it's been removed. It's definitely not present in Angular 9 (under @angular/common/http, at least).…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
-1
votes
1 answer

Angular 8 array initialized with HttpClient remains empty

I am trying to initialize an array from a Json file using HttpClient using the folowing code (there is a simple HttpClient service in dr): getData() { this.dr.getData().subscribe(data => { for (const d of (data as any)) { …
-1
votes
1 answer

How to correctly handle this Angular promise to return an array of object?

I am very new in Angular and I am finding the following problem. Into a service class I have this: import { Injectable } from '@angular/core'; import { HttpClientModule, HttpClient } from '@angular/common/http' @Injectable() export class…
AndreaNobili
  • 40,955
  • 107
  • 324
  • 596