Let's say i have a web page that i create with Angular 6, i want to do some auto reload or auto fetch data in periodic time. I've been searching the clue, and the only thing is using interval observable on angular.
My question is, how to using it when the process to get data comes through fetching API ? I give my code below:
dashboard.component.ts
import { interval } from 'rxjs';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';
export class DashboardComponent implements OnInit {
constructor(private countryunitservice: CountryunitService){
const theme = this.chartTheme;
this.Highcharts.theme = theme;
this.Highcharts.setOptions(theme);
}
ngOnInit() {
this.countryunitservice.getTicketCountryUnit().subscribe((res)=>{
this.temp = Object.values(res).map(val => +val);
this.Highcharts.chart({
chart: {
type: 'column',
renderTo:'chartContainer',
},
title: {
text: 'IDN'
},
subtitle: {
text: 'Country Unit'
},
xAxis: {
categories: ['In Queue', 'On Progress', 'Finished', 'Failed']
},
series: [{
type: 'column',
colorByPoint: true,
data: this.temp,
showInLegend: false
}]
});
})
}
And this is my CountryUnitService.ts :
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CountryunitService {
baseUrl:string = "https://blabla.id/rest/test";
constructor(private httpClient : HttpClient) { }
getTicketCountryUnit(){
return this.httpClient.get(this.baseUrl);
}
}