- Creating Web Components in Angular - February 23, 2021
- What is your Communication Style? - August 1, 2020
- Sharing is caring? - January 28, 2020
This is part 6 of the Angular tutorial for Beginners series.
Part 1 of this series discussed how to get started with Angular.
Part 2 discussed about the basic tenets of Angular Modules, Components and Directives.
Part 3 discussed data binding.
Part 4 discussed interfaces
Part 5 discussed how we can use services in angular.
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. But you can use any external service like webapis to get data.
Let’s create a file employees.json in the Asset folder as below and populate it with employee data.
[
{
"employeeId":1,
"employeeName":"Tuba",
"projectId":100
},
{
"employeeId":2,
"employeeName":"Atul",
"projectId":101
},
{
"employeeId":3,
"employeeName":"Theran",
"projectId":101
}
]
Now let’s make an Http get request to get the employee data as below. We will first import the HttpClient. We will then 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 e.g. promises cannot be cancelled but observables can be & 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 summarise, we have observables that will return us data over time only if we subscribe to it.
So, let’s make an HTTP GET request & return data as an Observable of IEmployees in employee.service.ts file.
import { Injectable } from '@angular/core';
import { IEmployee } from './employee/employee';
import { HttpClient, HttpResponse} from '@angular/common/http'
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
private _url:string = 'assets/employees.json';
constructor(private _http: HttpClient) {}
getEmployees() : Observable<IEmployee[]>{
return this._http.get<IEmployee[]>(this._url) ;
}
}
Also we will import the HttpClient in app.module.ts as below:
So to summarise, the above code, has an http get method, which returns value as an observable of IEmployee. You can substitute the variable url with any external url, for. eg 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 as below:
employees : IEmployee[]
ngOnInit() {
this.employeeService.getEmployees()
.subscribe(employees => this.employees = employees);
}
Our application will work as before, but now we have used http get & observables to retrieve the same data.
The official website provides some excellent information on Observables.
In the next section we will discuss how we use pipes in angular to modify data.
Contents of the Angular tutorial for Beginners series:
Part 2: Modules, Components & Directives in Angular.
Part 3: Data binding in angular.
Part 6: Http Requests with Observables.
