In the previous article, we’ve learned about HTTP and Observables in Angular. We’ve also learned about HTTP requests and HTTP response mechanisms in the previous article with block diagrams.
Index
Angular Fetch Data from API Using HttpClientModule
In this article, we will see how to fetch data using HTTP and use it in our app. This part plays an important role when you’re working with real-life apps.
Let’s follow the below steps and understand how to fetch data by making HTTP calls and process the data.
NOTE: The prerequisite for this article is the concept of Angular services and how to deal with them.
Step 1: Add HttpClientModule Into the Imports Array and Import It
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClientModule } from "@angular/common/http"; import { ServicesService } from './services.service'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [ServicesService], bootstrap: [AppComponent] }) export class AppModule { }
- Add HttpClientModule into the imports array.
- Import HttpClientModule from @angular/common/http.
Step 2: Create an Instance of HttpClient and Fetch the Data Using It
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { IStudents } from './student'; @Injectable({ providedIn: 'root' }) export class StudentService { url="/assets/data/students.json"; constructor(private http:HttpClient) { } getStudents():Observable <IStudents[]> { return this.http.get<IStudents[]>(this.url); } }
NOTE: We made a students.json file inside the assets folder, which consists of data and works as api_url for us.
[ {"id":100, "name":"Rahul", "Gender":"Male", "age":20}, {"id":101, "name":"Anish", "Gender":"Male", "age":20}, {"id":102, "name":"Manju", "Gender":"Female", "age":20}, {"id":103, "name":"Rohan", "Gender":"Male", "age":20} ]
Step 3: Create a Student Interface To Cast the Observables
export interface IStudents { id:number, name:string, gender:string, age:number }
Create a new ts file to create the interface.
Step 4: Subscribe the Data From the Service in the Component
import { Component,OnInit } from '@angular/core'; import { StudentService } from './student.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'my-app'; students = [] constructor(private studentservice:StudentService) { } ngOnInit():void { this.studentservice.getStudents().subscribe(data => { console.log(data) }) } }
Output:
We’ve printed the data in the console. The data can also be stored in an empty array and use in the component as per requirements.
Conclusion
We hope this article has helped you understand how to fetch data from a web server and use it in the various components. This is the most important part of any real-life project you’re working on. In the next article, we’ll learn HTTP error handling as well.
Read Next: Angular HTTP Error Handling