How to call REST API in Angular 8?

In this Angular 8 tutorial, we will show you step by step tutorial to call REST API in Angular 8 using HttpClient? So let’s get start to learn how to call REST API in Angular 8 using HttpClient

Creating an Angular 8 Project

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

$ ng new angular-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-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 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 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 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 8 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

In this tutorial, we used Angular 8 to build a simple news application that retrieves data from a JSON REST API using the get() method of HttpClient. We’ve seen how to subscribe to the RxJS Observable returned by the get() method and how to use the *ngFor directive to iterate over fetched data in the template. Finally, we’ve seen how we can create an Angular 8 project using Angular CLI v8, how to generate components and services and how to configure routing for the component

Recommended Posts

Angular 8 Services

165 Comments

  1. GregoryFruri said:

    Hi, here on the forum guys advised a cool Dating site, be sure to register – you will not REGRET it https://bit.ly/39cc9gy

    November 25, 2020
    Reply
  2. https://txt2080.com/ said:

    And it’s true — comments can be powerful. A great comment can land you on the radar of a popular blogger — the kind of super-connected influencer who can accelerate your success.
    Nobody tells you how to comment on blogs. You aren’t sure what a great comment looks like.
    카지노사이트

    November 30, 2020
    Reply
  3. https://www.vfv79.com/ said:

    Is it a comment that shovels heaps of praise onto the author? Or one that argues a persuasive alternative view? Or one that simply thanks the blogger for their insights?
    Because while many experts preach the virtues of strategic commenting, almost nobody tells you how to do it.
    카지노사이트

    November 30, 2020
    Reply
  4. https://liveone9.com/ said:

    As a result, many well-intentioned bloggers are spending their precious time writing comments they think are great.
    You want them to notice you. You want them to reply to your comment. Secretly, you want them to visit and comment on your blog, follow you on social media, and ultimately become your best friend forever.
    카지노사이트

    November 30, 2020
    Reply
  5. domoopelo said:

    kamagra acostumbramiento Eraveden online cialis fradrady Canadianpharmacies

    December 14, 2020
    Reply
  6. tiktok begeni hilesi said:

    Tiktok beğeni hilesi paketlerini satın alarak birçok önemli avantajı bir arada elde edebilirsiniz

    January 8, 2021
    Reply
  7. doujinth said:

    ดู เอ๊ก ด คลิป x ดู คลิป โปํ ฟรี s หนัง โป็ ดู เอ๊ก porn7 หนังเย็ดออนไลน์ s หนัง โป็ xxx โ ดู หนัง โบ๊ ออนไลน์ ฟรี หนัง _x หนัง โป็ ว ฟรี หนังเย็ดออนไลน์ หนัง ออนไลน์ 18+ หนัง โป็ ว ฟรี หนัง เซ ก ฟรี หนังโบ็ หนัง ออนไลน์ 18+ porn7 หนัง เอ๊ก ออ น ไล ฟรี doujinth หนังฮักแพงออนไลน์ soy’fx หนัง xxx ้ หนังโป้ฟรี ดู คลิป โป้ ๆ หนังโป๊ออนไลร์ หนัง โป ว์ ออนไลน์ รูปโป็ไทย หนังxออนไลน์ นวดนม ค ริบ หนัง โป้ ดู หนัง โบ๊ ออนไลน์ ฟรี เล่นเกมส์จับคู่ฟรี ดู bleach เทพมรณะ ดู หนัง โบ๊ ออนไลน์ ฟรี s หนัง โป็ ดูหนังเอกซ์ หนัง ง เอ็ ก หนัง โป็ ว ฟรี ห บัง โป๊ หนังxav ดู คลิป โปํ ฟรี tuk tuk porn porn 7 ด คลิป x ภรรยาผมเป็นประธานนักเรียน หนโป้ รูปโป็ไทย หี porn หีส หนัง โป็ ว ฟรี doujinth ฟนังxxx ห บัง โป๊ เล่นเกมส์จับคู่ฟรี คลิปโ หนัง โป ว์ ออนไลน์ คลิป มาใหม่ หนังโป๊ เย็ด tuk tuk porn ห นัว x ฟรี ด คลิป x หนังเอ็กออนไลน์ ดู ห รัง x หีสาวจีน doujinth หนัง _x ห ยัง โป๊ะ ค ลิบ หลุด บ อย ป กร หนัง เซ ก ฟรี doujinth

    January 8, 2021
    Reply
  8. Güvenilir takipçi satın alma said:

    İncelediğiniz paketteki hesaplar yerli-yabancı karışık data hesaplardır. Eğer ihtiyacınız türk takipçi paketleriyse İnstagram Türk Çekiliş Takipçi paketlerimizi inceleyebilirsiniz.

    January 11, 2021
    Reply
  9. Kirstie Scotting said:

    are blog posts reason enough for a company to sue an individual according to the Indian law?

    January 19, 2021
    Reply
  10. WWW.XMC.PL said:

    Wow Im frustrated. Im not saying you are responsible, I think it is everyone else out there that isnt taking notice.

    January 26, 2021
    Reply
  11. WWW.XMC.PL said:

    I lately came across your web web site and have been reading along. I thought I would leave my very 1st comment. Nice blog. I will keep visiting this website really regularly.

    January 29, 2021
    Reply
  12. Jdbxguany said:

    cheap viagra in las vegas nv overnight delivery viagra buying viagra online in netherland,paypal [url=http://llviabest.com/]viagra 25 or 50?[/url] ’

    January 30, 2021
    Reply
  13. Treyfehailk said:

    Извините за то, что вмешиваюсь… Я разбираюсь в этом вопросе. Готов помочь.


    Жаль, что сейчас не могу высказаться – очень занят. Но вернусь – обязательно напишу что я думаю по этому вопросу. скачать фифа, скачать fifa и fifa 15 скачать фифа

    February 2, 2021
    Reply
  14. Angylikged said:

    особенно про вульгарную крошку


    Между нами говоря, рекомендую поискать ответ на Ваш вопрос в google.com скачать фифа, скачать fifa и fifa 15 скачать fifa

    February 2, 2021
    Reply
  15. Angylikged said:

    По моему мнению Вы не правы. Давайте обсудим.


    Я могу проконсультировать Вас по этому вопросу. Вместе мы сможем найти решение. скачать фифа, скачать фифа а также fifa 15 скачать фифа

    February 3, 2021
    Reply
  16. CharlesSuina said:

    [url=https://mp3rave.site]какую музыку[/url]

    February 23, 2021
    Reply
  17. EddieSox said:

    [url=https://soundmix.site]песнь[/url]

    February 24, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *