This sends a request to an invalid url on the npm api then assigns the error to the
errorMessage
component property and logs the error to the console.
ngOnInit() {
this.http.get<any>('https://api.npms.io/v2/invalid-url').subscribe({
next: data => {
this.totalAngularPackages = data.total;
error: error => {
this.errorMessage = error.message;
console.error('There was an error!', error);
Example Angular component at
https://stackblitz.com/edit/angular-http-get-examples?file=app/components/get-request-error-handling.component.ts
GET request with headers set
This sends the same request again with a couple of headers set, the HTTP
Authorization
header and a custom header
My-Custom-Header
.
The below headers are created as a plain javascript object, they can also be created with the
HttpHeaders
class, e.g.
const headers = new HttpHeaders({ 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' })
To set or update headers on an existing
HttpHeaders
object call the
set()
method, e.g.
const headers = new HttpHeaders().set('Authorization', 'Bearer my-token')
ngOnInit() {
const headers = { 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' }
this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular', { headers }).subscribe(data => {
this.totalAngularPackages = data.total;
Example Angular component at
https://stackblitz.com/edit/angular-http-get-examples?file=app/components/get-request-headers.component.ts
Prerequisites for making HTTP request from Angular
Before making HTTP requests from your Angular app you need to do a couple of things.
1.
Add the
HttpClientModule
to the
imports
array of your
AppModule
like below on lines
3
and
10
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
HttpClientModule
declarations: [
AppComponent
bootstrap: [AppComponent]
export class AppModule { }
2.
Import the
HttpClient
into your component and add it to the
constructor()
params like below on lines
2
and
8
.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
totalAngularPackages;
constructor(private http: HttpClient) { }
ngOnInit() {
// Simple GET request with response type <any>
this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular').subscribe(data => {
this.totalAngularPackages = data.total;
