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

Angular6 error: the data which I am getting from api is in the string format,below is the response image

hi want to show the data from my api to my frontend (Angular 6), but this error comes up: I am using HttpClient method from angular 6 I am new to angular Angular6 error: the data which I am getting from api is in the string format, I need to convert…
vinay k hegde
  • 243
  • 4
  • 18
-1
votes
1 answer

How to Reading the full response header using Angular 5 HttpClient

I have written service in Angular 5 which does a GET request to my backend using the HttpClient class. My request looks like this: headers = new HttpHeaders().set('Content-Type', 'application/json') …
Swapnil Yeole
  • 406
  • 3
  • 12
  • 26
-1
votes
1 answer

httpClient put request display error

I want to update some data and I use for example an free api from internet. I am getting following error in my browser: What is the problem? updateShortUrl(data: ShortUrl): Observable { return…
Noah Tony
  • 373
  • 3
  • 7
  • 18
-1
votes
2 answers

Ionic/Angular: reading any HTML page from another website

In Android I can use OkHttp to read any Html page and scan it for items. Can this be done by I would to convert the Android app to Ionic. It looks like that any read of an HTML page with HttpClient will result in a CORS or CORB. So, I cannot…
tm1701
  • 7,307
  • 17
  • 79
  • 168
-1
votes
1 answer

Asp.Net Core FromBody parameter always null on angular PUT request

I try to update the identity of a worker on my project, I use HttpClient with a put, working in Angular 6 project and web API 2 on .NET Core. You can see here the request on the front-end side: updateWorkerIdentity(worker: WorkerRead) :…
Loon
  • 19
  • 3
-1
votes
1 answer

Rest-api call is not sent in Angular 6 and RxJS

I have this method in the component: saveItem() { return this.itemService.updateItem(this.item) .pipe( tap((data: any) => { this.toastr.success('Saved'); }), catchError((error: any) => { return…
panagulis72
  • 2,129
  • 6
  • 31
  • 71
-1
votes
1 answer

Consuming REST services in Angular 6 using HttpClient gives Observable value as undefined when subscribed

I have created an Angular service which returns an Observable array of objects, using of from rxjs: export class HackfestService { constructor(private http: HttpClient) { } getHackfests():Observable{ return of([ …
-1
votes
1 answer

How does one read the response headers in an Angular6 HttpClient response?

[Completely rewritten to get to the heart of the issue] I am using Angular6. The HttpClient communicates with a server application. I need to know how to read the headers on the response when utilizing HttpClient with the post and get…
Jared Clemence
  • 1,062
  • 11
  • 26
-1
votes
1 answer

Angular 5 HttpClient : how to set interceptor to only filtered URLs by RegExp

Under my angular 5 app , I'm writing an interceptor service : @Injectable() export class myInterceptor implements HttpInterceptor { constructor() { } intercept(req: HttpRequest, next: HttpHandler): Observable> { const…
firasKoubaa
  • 6,439
  • 25
  • 79
  • 148
-1
votes
1 answer

Angular HttpClient with Custom ViewModel

I am leveraging HttpClient instead of Http for my service call along with Observable which works well. However, I want to map some of the custom properties. Is that something we can fetch and map? To give you background: I have One service: this…
Brijesh
  • 61
  • 1
  • 11
-1
votes
2 answers

Angular HttpClient doesn't send header on GET?

while getting data from Bing Api using POSTMAN works fine. but the same in angular not works, problem is in sending headers. Error Response: 401 (Access Denied) what am doing wrong here import { HttpClient, HttpHeaders } from…
codedamn
  • 811
  • 4
  • 10
  • 16
-1
votes
2 answers

Use ".filter" in angular

I try filter data (get records with given number) http.get(baseUrl + 'api/Student/Students1') .filter( stud => stud.Phone == 123) .subscribe(data => { this.studentTEST = data.json() as Students[]; }, error => console.error(error)); But get…
St.S
  • 11
  • 5
-1
votes
2 answers

How to fetch data in Angular

can someone help me with getting number from http response in Angular 5 ? I don't now how to do it, I was searching at internet but Angular grow very fast so it doesn't help me. Thanks for any help ! My code: import { Injectable } from…
-1
votes
1 answer

Angular2 - Unable to import http module

Answer did not help me import http module without error. $ ng version Angular CLI: 1.5.0 Node: 6.11.5 OS: linux x64 Angular: 5.0.0 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ...…
overexchange
  • 15,768
  • 30
  • 152
  • 347
-1
votes
1 answer

Angular4 Consuming HttpClient Service in Component

I'm new to Angular4 from a Python background and trying to understand the best pattern for creating a HTTPClient Service then consuming that service in a component. My service looks like this: @Injectable() export class DatasetService { …
Iain Hunter
  • 4,319
  • 1
  • 27
  • 13