Using Angular’s Httpclient to Fetch and Display External Api Data

Angular’s HttpClient is a powerful module that allows developers to easily fetch data from external APIs and display it within their applications. This tutorial will guide you through the process of using HttpClient to retrieve and present data effectively.

Setting Up HttpClient in Angular

Before using HttpClient, ensure your Angular project has the HttpClientModule imported. Add the following to your app.module.ts:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // other imports
  ],
  // other properties
})
export class AppModule { }

Creating a Service to Fetch Data

Generate a new service using Angular CLI or create one manually. Here’s an example of a simple service that fetches data from an external API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Observable {
    return this.http.get(this.apiUrl);
  }
}

Fetching and Displaying Data in a Component

Inject the service into your component and subscribe to the data stream. Display the data using Angular templates:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-data-display',
  template: `
    
External API Data
    

      
{{ item.name }}
    
  `
})
export class DataDisplayComponent implements OnInit {
  data: any[] = [];

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getData().subscribe(response => {
      this.data = response.items;
    });
  }
}

Conclusion

Using Angular’s HttpClient simplifies the process of fetching external API data. By creating a dedicated service and subscribing to data streams in components, developers can build dynamic and responsive applications efficiently.