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
-2
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
  • 28,018
  • 52
  • 196
  • 347
-2
votes
2 answers

Why http://localhost:4200 is appended to HttpClient API?

I am working with Angular7. When I make API call Angular application URL also appended to the URL const payload = { id: 1, name: 'ABC }; const httpOptions = { headers: new HttpHeaders({ 'Content-Type':…
Prince
  • 6,152
  • 15
  • 68
  • 108
-2
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
  • 28,018
  • 52
  • 196
  • 347
-2
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
  • 34,200
  • 85
  • 240
  • 456
-2
votes
1 answer

Angular http: prevent calling multiple requests by chaining them

I have an API PUT to /api that I want to prevent sending multiple requests at the same time by chaining them: the second call should wait for the first one finish, and so on. No call should be ignored (I don't talk about throttle / debounce / rate…
HTN
  • 2,526
  • 1
  • 5
  • 12
-2
votes
3 answers

Sending a get request with HttpParams in angular

This is the GET mapping in my backend: @GetMapping(value = "search") public List search(@RequestBody CatDto catDto) { return catService.search(catDto); } I want to send a GET request to get a list back in Angular HttpClient. I know that I…
cheshire
  • 1,006
  • 8
  • 21
-2
votes
1 answer

In angular 7 am using HTTPclient module for api's and To get a cooke from server am passing withCredentials = 'true' but getting CORS error

Kept Withcredetials = true to get cookies in Angular HttpClient post request but getting CORS error (backend is .net core) "from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access…
-2
votes
1 answer

Why do I have an undefined in GET?

I am trying to display an array of elements from a JSON file using Angular and Node.js but as a response I have got undefined. I do not know where is it coming from. There are some files from my projects. Simple service to make GET request to…
Bogdan Zeleniuk
  • 126
  • 2
  • 10
-2
votes
1 answer

How to load a font file( ttf and otf) in angular using httpclient as binary file to process with opentype.js

How to load a font file( ttf and otf) in angular using httpclient as a binary file to process with opentype.js. I have to extract svg paths from the font files loaded using angular http module. what should be the type i should mention in the service…
-2
votes
1 answer

how http, httpClient, httpModule and httpClientModule differ with each other?

Can you please let me know how http, httpClient, httpModule and httpClientModule differ with each other? which among them are depricated and supported versions of each of them.
mahesh peddi
  • 747
  • 3
  • 8
  • 20
-2
votes
1 answer

StaticInjectorError

This is my HttpClient code: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { CreeperUser } from '../Models/CreeperUser'; import { Observable } from 'rxjs'; @Component({ templateUrl:…
Jeb Feng
  • 47
  • 8
-2
votes
1 answer

Handle errors when calling an API using

On an Angular 7 component I am calling a service: this.postService.getByCategoryId(10) .subscribe((response: GetPostsByCategoryIdResponse>) => { this.posts = response.map((post: PostModel) => ({ id: response.id, title:…
Miguel Moura
  • 28,129
  • 59
  • 187
  • 356
-2
votes
1 answer

angularjs and angular 4 http request

I am porting an app from angularjs to angular 4 I encounter a problem with http request. Here is a call in angularjs : $http.post(/get_paginate_items_with_search', params).succes(function (data) {}) data is displaying now in angular 4 import {…
Bobby
  • 2,446
  • 1
  • 18
  • 52
-2
votes
2 answers

How to get img url from api which is key based in angular 5?

I'm using angular 5. I write bellow http.get method to get data from api in angular 5. I want to get the url of image to use this in my slider. getImages(){ this.httpclient.get('blabla/banner.php').subscribe((result) => { this.images =…
Sagar Kodte
  • 3,515
  • 1
  • 17
  • 46
-3
votes
1 answer

Unable to assign the data to variable from post method in angular

Unable to assign data to a variable from http post method. If we assign its resulting undefined. Though I use promise method, subscribe method. If we print within subscription method, console will print data, there after when we assign to variable…
1 2 3
85
86