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

Function that can call two APIs, one of them returns an array

I have the following code: getElements(apiUrl: string): Observable { return this.httpClient.get(apiUrl + 'test/elements').pipe( catchError(error => { if(error.status === StatusCodes.NOT_FOUND){ …
BDM_45
  • 3
  • 1
-1
votes
1 answer

Why can I not set private allTodos property in service with data coming from http request?

I have a todo-list component and I'd like to populate that component with a todo-service. This service is grabbing the data from a local JSON file. My todo-list component looks like this: import 'zone.js/dist/zone'; import { Component } from…
onTheInternet
  • 6,421
  • 10
  • 41
  • 74
-1
votes
1 answer

How can I Interpolate data from HttpClient Rest Api?

I have this component where I am pulling data from a REST API using the HttpClient. The pulling of the data works well. I could tell because I could see the data being displayed in Console Log. When it comes to using the data in the HTML I am stuck.…
-1
votes
1 answer

What dictates Angular's HTTPClient.get timeout?

I have some frontend code, which sends out an HTTPClient.get request to a Lambda function I have. It's working fine. But I started thinking about how to explore the limits of HTTPClient and fell short a bit. public httpGet(url: string):…
cien
  • 43
  • 6
-1
votes
1 answer

Angular catch error code after http request

i'm making Angular app which has communication with backend app. The backend app return me status OK - "200" or few errors, eg. "401, 402, 422", and some others. I would like to catch the error code and base in it display correct information to end…
Ilkar
  • 2,113
  • 9
  • 45
  • 71
-1
votes
1 answer

How to customize HttpClient in Angular

I have a question for about Angular Project (v.10.2.5). I wanna set some event behaviors for HttpClient (for example I wanna show full screen loading indicator for all http methods, also I wanna write log to console). I have so many api methods and…
-1
votes
1 answer

Angular post subscribe never triggering HTTP call

So I have looked into all the different things about how "all you have to do is add .subscribe()" and that is not doing anything, so here is what I have: private loginPost(username: string, password: string): Observable { return…
Joshua G
  • 2,086
  • 3
  • 19
  • 22
-1
votes
1 answer

ANGULAR and PHP : Warning: Undefined array key

I coded an API in PHP-MySql. It works fine through PostMan. But when I want to modify a "partenaire" via my ANGULAR application, I have this error (see image). Any idea please? Here's the PHP : // Update a partenaire in database if ($api ==…
-1
votes
1 answer

problem with returning data received from an HttpClient get method

I'm having trouble returning data that I received from an httpClient get method in angular. I'm getting all of the objects from the DB and I implement an if statement to return an array with some of the objects. All of the following code is in a…
-1
votes
1 answer

How to automatically convert YYYY-MM-DD strings from HTTP responses to Date?

In an Angular application, I'm getting a JSON from the server which contains a date, the date is like "2022-08-05" in developers tools -> network -> response. Using an HTTP request, I'm putting the JSON inside the following interface: export…
sandrino
  • 65
  • 1
  • 7
-1
votes
2 answers

Dynamic Key Value Pair - Angular Typescript

I am trying to set a key value pair in the HttpParams that has a dynamic key value, for example: let params = new HttpParams(); properties.forEach(p => { params = params.appendAll({ p.id : p.value}) } But the p.id does not work as it expects to…
herk
  • 15
  • 6
-1
votes
2 answers

Property 'name' does not exist on type 'never'

I am learning Angular and trying to make an API call but why do I get this error: error TS2339: Property 'name' does not exist on type 'never'. import { Component, OnInit } from '@angular/core'; import { HttpClient } from…
Kikoanno
  • 91
  • 2
  • 10
-1
votes
1 answer

Angular HttpClient CORS Error With API Calls

I'm creating a web based platform with Angular that interacts with the Magic Eden API (documentation: https://api.magiceden.dev/). Please keep in mind this is not my API, I'm merely making calls to it from my front end. When I make API calls to the…
trickster625
  • 37
  • 2
  • 9
-1
votes
1 answer

How to properly implement wrapper around http.get in typescript?

First of all, my Typescript knowledge is very low, so I assume that this is a somewhat basic question. In the frontend of my web application, there are two parameters which I need to provide in 99% of all http get-requests. To make my life a little…
Chris
  • 1,417
  • 4
  • 21
  • 53
-1
votes
2 answers

Angular - Get Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

I am now building my front-end now on Angular and for the life of me, I cannot see what is causing this error. I am using Node.js as my backend. Below is my code. country.ts export class Country { id?: string; name?: string; icon?: string; …
tourafrika
  • 15
  • 6