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

How to use httpclient params and httpclient headers in httpclient post method?

I want to migrate my angular project from angular 5 to angular 7 and for that, I want to convert my all HTTP calls to httpclient call.
-1
votes
2 answers

How to post form data in angular?

I am trying to post one of the form data to specific server which is CORS disabled that means it will only accept POST method and dis-allowed OPTIONS preflight request which is completely understandable but one of the post says that if request is…
Danny M
  • 92
  • 8
-1
votes
1 answer

Angular http.get returns 404 in app but ok from POSTMAN

I am trying to test an API call. I am able to make it work from POSTMAN. When I try writing a simple Angular app to get the result, I am getting errors. From looking at the errors, it seems like it is either appending localhost onto the actual…
-1
votes
1 answer

Ionic CORS Error, But Server Has CORS Enabled

I have an Ionic 4 app that uses a lambda API hosted on AWS. CORS is enabled on the API Gateway. The following snippet is from a curl request to the API. < content-type: application/json < content-length: 42 < date: Sat, 16 Feb 2019 02:19:25 GMT <…
SteveB
  • 483
  • 1
  • 4
  • 18
-1
votes
2 answers

Uncaught (in promise): TypeError: Cannot read property 'get' of undefined in angular2+

I have made a component in the angular2+ file. I want to make an http request to the nodeJs server. However, i keep getting - > Uncaught (in promise): TypeError: Cannot read property 'get' of undefined TypeError: Cannot read property 'get' of…
Techdive
  • 997
  • 3
  • 24
  • 49
-1
votes
1 answer

httpClient debugging order in subscription

I've got the following TS-method. When I set the two breakpoints #1 and #2 it first hits #1 for all my objects and after that it hits #2 for all my problems. In my opintion that should be in another order. public getBuild(val) { let j_jobs:…
el_diep
  • 29
  • 1
  • 7
-1
votes
1 answer

Angular HttpClient authenticate on API using token

I'm trying to get my data from my Jenkins JSON - API using HTTPClient. Because the data, I want to access is restricted I need to authenticate against Jenkins. So I generated an API-Token. Now I want to Authenticate myself using the Angular…
el_diep
  • 29
  • 1
  • 7
-1
votes
1 answer

status returned as 0 on api call in angular 7

export class BannerComponent implements OnInit { constructor(private http: HttpClient) { } banners: any; url = 'localhost:9000/api/banners'; ngOnInit() { this.getBanners(); } getBanners(): any { return…
user10799821
-1
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
  • 36,732
  • 85
  • 259
  • 481
-1
votes
1 answer

Getting 401 Unauthorized - CORS origin error while posting using HttpClient in Angular5

Getting the below error while attempting to post data into my backend firebase DB. Please find the code snippets below: storeUsers(users: any[]){ return this.http.post('https://promise-90488.firebaseio.com/data.json', users); …
-1
votes
1 answer

Pass method as parameter between components and modules in Angular 6

I need to pass method of my service as parameter. Folder structure looks like this: -app.module.ts -- MODULE |___main_component -- SHARED MODULE |___shared_component |___shared_service My shared_service contains only one method and looks like…
Ant
  • 129
  • 1
  • 11
-1
votes
2 answers

Angular 7 Cannot read the property email of undefined

I just want to display the email of this logged in user in the header Here is my AuthService: import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map…
-1
votes
1 answer

How to make a normal post request in angular 4

My question is very simple... I need to make a regular post request in angular 4 app, like as html form post, that is that replace the window location..because if I do it using HttpClient, this makes an ajax POST... My question is... How to make a…
AlejoDev
  • 4,345
  • 9
  • 36
  • 67
-1
votes
1 answer

EDIT: disregard this question (How to return cold observable before making http call)

I have an angular service something like this: saveNewUser(user: User): Observable { if (!user || !user.password) { return of(false); } return this.http.put(this.saveUrl, user).pipe(map((res: Response) => res.ok)); } I am…
Bubba
  • 119
  • 1
  • 9
-1
votes
3 answers

Can't resolve all parameters for UserServiceService: (?)

I'm trying to get users data by the link given in getsUserUrl.To do that it requires a token(see the token variable) that I have added in the header. .Whenever I start the server I get an error like this. Can't resolve all parameters for…
Rajat Singh
  • 155
  • 1
  • 1
  • 11