In this Angular 8/7 tutorial, you'll learn by example how to send GET requests to REST API servers in your application using HttpClient . We’ll also learn how to use the basic concepts of Angular 8 like components and services and how to use the ngFor directive to display collections of data.

We’ll be consuming a JSON API available from NewsAPI.org

Throughout this tutorial, we are going to build a simple example from scratch using Angular CLI 9 and we’ll see how to use HttpClient to send GET requests to third-party REST API servers and how to consume and display the returned JSON data.

In more details, we'll learn:

You can also follow this tutorial as a video:

You can also learn how to build a chat app with Angular 9 and Ionic 5 in this tutorial

Prerequisites

Before getting started, you need a few requirements. You need to have the following tools installed on your development machine:

Node.js and npm. You can install both of them from the official website.

Angular CLI 8 (You can install it from npm using: npm install -g @angular/cli )

Creating an Angular 8/7 Project

Now let’s create our Angular 9 project. Open a new terminal and run the following command:

$ ng new angular-8-httpclient-demo

The CLI will prompt you if Would you like to add Angular routing? (y/N), type y. And Which stylesheet format would you like to use? Choose CSS and type Enter.

Next, you can serve your application locally using the following commands:

$ cd ./angular-8-httpclient-demo $ ng serve

Your application will be running from http://localhost:4200 .

Getting News Data

Before you can fetch the news data from NewsAPI.org which offers a free plan for open source and development projects, you first need to go the register page for getting an API key.

Adding an Angular 8 Service

Next, let’s create a service that will take care of getting data from the news API. Open a new terminal and run the following command:

$ ng generate service api

Setting up Angular 8 HttpClient

Next, open the src/app/app.module.ts file then import HttpClientModule and add it to the imports array:

// [...] import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ // [...] HttpClientModule, ], // [...] }) export class AppModule {}

That's all, we are now ready to use the HttpClient in our project.

Injecting HttpClient in The Angular 8 Service

Next, open the src/app/api.service.ts file and inject HttpClient via the service constructor:

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ApiService { constructor(private httpClient: HttpClient) { } }

Sending GET Request for Fetching Data

Next, define an API_KEY variable which will hold your API key from the News API:

export class ApiService { API_KEY = 'YOUR_API_KEY';

Finally, add a method that sends a GET request to an endpoint for TechCrunch news:

public getNews(){ return this.httpClient.get(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`); }

That’s all we need to add for the service.

How the HttpClient.get() Method Works

The HttpClient get() method is designed to send HTTP GET requests. The syntax is as follows:

get(url: string, options: { headers?: HttpHeaders; observe: 'response'; params?: HttpParams; reportProgress?: boolean; responseType?: 'json'; withCredentials?: boolean; }): Observable<HttpResponse<Object>>;

It takes a REST API endpoint and an optional options object and returns an Observable instance.

Creating an Angular 8 Component

Now, let's create an Angular 8 component for displaying the news data. Head back to your terminal and run the following command:

$ ng generate component news

Injecting ApiService in Your Component

Next, open the src/app/news/news.component.ts file and start by importing ApiService in your component:

import { ApiService } from '../api.service';

Next, you need to inject ApiService via the component's constructor:

import { Component, OnInit } from '@angular/core'; import { ApiService } from '../api.service'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.css'] }) export class NewsComponent implements OnInit { constructor(private apiService: ApiService) { } }

Sending the GET Request & Subscribing to The Observable

Next, define an articles variable and call the getNews() method of the API service in the ngOnInit() method of the component:

export class NewsComponent implements OnInit { articles; constructor(private apiService: ApiService) { } ngOnInit() { this.apiService.getNews().subscribe((data)=>{ console.log(data); this.articles = data['articles']; }); } }

This will make sure our data is fetched once the component is loaded.

We call the getNews() method and subscribe to the returned Observable which will send a GET request to the news endpoint.

Displaying Data in The Template with NgFor

Let’s now display the news articles in our component template. Open the src/app/news.component.html file and update it as follows:

<div *ngFor="let article of articles"> <h2>{{article.title}}</h2> <p> {{article.description}} </p> <a href="{{article.url}}">Read full article</a> </div>

Adding the Angular Component to The Router

Angular CLI 9 has automatically added routing for us, so we don’t need to set up anything besides adding the component(s) to our Router configuration. Open the src/app/app-routing.module.ts file and start by importing the news component as follows:

import { NewsComponent } from './news/news.component';

Next, add the component to the routes array:

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { NewsComponent } from './news/news.component'; const routes: Routes = [ {path:'news', component: NewsComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

You can now access your component from the /news path.

Conclusion