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

Using the angular httpclient i receive this error TypeError: Cannot read properties of undefined (reading 'get')

I have to make an http request via Angular but the error written in the title appears whether I use 'post' or 'get' as if the http variable was undefined or uninitialized. I checked the module and is imported correctly import { NgModule } from…
-2
votes
2 answers

How do I properly pass headers to each HTTP call in my Angular service?

I'm using Angular 14. I have created the below service: import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class HolidayCalendarService { ... private readonly headers: HttpHeaders; …
Dave
  • 15,639
  • 133
  • 442
  • 830
-2
votes
1 answer

Method is provided an array of usernames and HTTP request for each --> returns observable array of user objects

I'm trying to get a array of objects when provided a (non-observable) array of usernames (string[]). I would like to have a method that is able to get each user object via getUser(username) (HTTP GET request from Angular in-memory web API) for each…
jmo31
  • 21
  • 4
-2
votes
1 answer

Making execution wait for subscribe() body, Angular14

As i mentionned above, i use a function that sends an http request to the backend to get some data, which returns an observable; when i call that function, i have to subscribe to it so i can handle its return, then i do some additional code after…
mouse
  • 15
  • 2
-2
votes
1 answer

Having a problem connecting Shopify Admin Api to angular frontend via RestAPI

I have tried using HttpClient from angular. export class RegisterationService { constructor(private http : HttpClient) { } connectShopify(){ return this.http.get('https://shop-name.myshopify.com/admin/api/2022-04/shop.json',…
-2
votes
1 answer

Are those 2 HTTP Get Statements equal? What does this map do?

I followed a documentation, where they used: findLessons(): Observable { return this.http.get('http://localhost:3000/api/lessons').pipe( map(res => res["payload"]) ); } However this didn't work, I got an undefined. I came up…
Ibrahim
  • 85
  • 8
-2
votes
1 answer

Angular/Typescript - Boolean variable not updating on .subscribe

I have this function on the server side, forced to return true for the moment: [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] [HttpGet("cPasaAJefeVentas")] public async Task
FranciscoFJM
  • 119
  • 1
  • 10
-2
votes
3 answers

Convert Curl request to Angular request

I have a problem with this CURL request. It works fine if I send it over terminal but when I convert it to Angular HTTP Client call it doesn't work. Curl: curl --location --request PUT '' \ --header 'Accept: application/json' \ --header…
Gregor A
  • 217
  • 5
  • 16
-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':…
Gnik
  • 7,120
  • 20
  • 79
  • 129
-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
  • 3,388
  • 1
  • 8
  • 18
-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,109
  • 3
  • 15
  • 37
-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
  • 11
-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
  • 787
  • 3
  • 8
  • 21
1 2 3
96
97