Post
Ask Question

Angular For Beginners - Part Six - Using HTTP With Observables In Angular

Welcome to part 6 of the Angular Tutorials for Beginners series. We will be diving deep into the sample code referred to in the earlier parts of this series. So, it is recommended that you go through the earlier parts first. We have covered the following topics till now.
This part discusses how we can make an HTTP call to retrieve data as observables.
 
We will hardcode the employee data in a JSON file as below and use it for our demo. However, you can use any external service like Web APIs also to get the data.
 
Let’s create a file named employees.json in the Assets folder as below and populate it with employee data.
  1. [  
  2.     {  
  3.     "employeeId":1,  
  4.     "employeeName":"Tuba",  
  5.     "projectId":100  
  6.     },  
  7.     {  
  8.         "employeeId":2,  
  9.         "employeeName":"Atul",  
  10.         "projectId":101  
  11.     },  
  12.     {  
  13.         "employeeId":3,  
  14.         "employeeName":"Theran",  
  15.         "projectId":101  
  16.     }  
  17. ]  
Using HTTP With Observables In Angular
 
Now, let’s make an HTTP GET request to get the employee data as below. We will first import the HttpClient and then, will inject an instance of the HttpClient in our service’s constructor. As discussed in the last part, to do this, we need to mark our services as @Injectable.
 
We will return an observable of IEmployees. Observables are similar to promises but are better. There are a few differences between observables and promises. For example - promises cannot be canceled but observables can be. And, promises return a single value whereas observables handle multiple values.
 
Observables return data lazily, i.e., if no one is subscribing to it, it won’t return a result. Therefore, we will later subscribe to the observable. So to summarize, we have observables that will return us data over time only if we subscribe to it.
 
So, let’s make an HTTP GET request and return data as an Observable of IEmployees in employee.service.ts file.
  1. import { Injectable } from '@angular/core';  
  2. import { IEmployee } from './employee/employee';  
  3. import { HttpClient, HttpResponse} from '@angular/common/http'  
  4. import {Observable} from 'rxjs';  
  5.    
  6. @Injectable({  
  7.   providedIn: 'root'  
  8. })  
  9. export class EmployeeService {  
  10.   private _url:string = 'assets/employees.json';  
  11.   constructor(private _http: HttpClient) {}  
  12.    
  13.   getEmployees() : Observable<IEmployee[]>{  
  14.     return this._http.get<IEmployee[]>(this._url) ;                  
  15.   }  
  16. }  
Using HTTP With Observables In Angular
 
Also, we will import the HttpClient in app.module.ts as below.
 
Using HTTP With Observables In Angular
 
So to summarize, the above code has an HTTP GET method which returns a value as an observable of IEmployee. You can substitute the variable URL with an external URL, such as - a Web API URL.
 
Now, let’s subscribe to our observable as below. Remember that if we don’t subscribe to an observable, it will not return anything. The below code shows how we can subscribe to an observable.
 
Modify the employee.component.ts file as below.
  1. employees : IEmployee[]  
  2.   ngOnInit() {  
  3.     this.employeeService.getEmployees()  
  4.     .subscribe(employees => this.employees = employees);     
  5. }  
Using HTTP With Observables In Angular
 
Our application will work as before but now, we have used HTTP GET and Observables to retrieve the same data.
 
Using HTTP With Observables In Angular
 
The official website provides some excellent information on Observables.
 
In Part 7, we will discuss how we use pipes in Angular to modify data. Stay Tuned!!!
 
This article was originally published on my website taagung.


Similar Articles