Angular 9 HTTP polling Data Using RxJs Observables

This angular 5 tutorial help to create data-pooling functionality using RxJs. We will create a simple HTTP rest consumer that will call every 5 sec using RxJS. The Observable help to add subscriber to get data from HTTP and set it to the class variable.

In this article, We will create an HTML table that contains all data, we will refresh the HTML table content every 5 seconds. We will use angular 5 and RxJs to achieve pooling data on a set of interval times.

Checkout Other Angular tutorials,

• Local Storage and Session Storage In Angular 4
• Getting started with angular 4
• How to Convert Bootstrap 4 theme into Angular 4 Layout

I am using the following files and folder:

• src/index.html: This file is used for html table container wrapper.
• src/app/templates/app.component.html: We will define the Table html element.
• src/app/templates/app.component.js: This is a component file of HTTP call and bind data.
• src/app/app.module.ts: We will use this file to import the module.

Open src/app/app.component.html template file and add the below code:

<div style="margin: 50px;">
<div class="alert alert-info"><b>Angular 5 HTTP polling Data Using RxJs Observables!</b></div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{emp.first_name}}</td>
<td>{{emp.last_name}}</td>
<td><img src="{{emp.avatar}}" width="50"></td>
</tr>
</tbody>
</table>
</div>
</div>

The above code have a bootstrap HTML table list and binding row data using employees.

Now we will Open src/app/app.component.ts template file and add the below code:

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

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
	private loader = false;
	private page = 1;
	private employees : any;
	pollingData: any;
	errors: any; 
	constructor(public http:HttpClient) {
		//this.employees.data = [];
		this.loader = true;
		this.pollingData = Observable.interval(5000)
		.switchMap(() => http.get('https://reqres.in/api/users?page='+this.page))
		.subscribe(
			data => {
				this.employees = data; 
				this.loader = false;
				console.log(data);// see console you get output every 5 sec
				this.page = this.page +1;
				//reset page number
				if(this.page === 4)
					this.page = 1;
			},
			error => {
				this.errors = error;
			}
			);
	}

	ngOnDestroy() {
		this.pollingData.unsubscribe();
	}
}

Imported rxjs and httpclient module, we have created HTTP requests to get data using observable and subscribe on each 5 sec.

Open src/app/app.module.ts template file and import angular5 HTTP module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }