How to auto update data on ionic page with out refreshing the page

Ionic Framework ionic-v3
4

Rxjs should work here, but haven’t tested it. Also error handling is missing.

import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/mergeMapTo';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-weather',
  template: `
    <ion-content>
    <h2>{{(data | async)?.city}}</h2>
    <p *ngIf="(data | async)">{{(data | async)?.degree}}°C</p>
    </ion-content>
  `
})
export class WeatherPage {
  data: any;
  constructor(private http: Http) {
    this.getWeather();
  }

  private getWeather() {
    this.data = Observable
    .interval(10000)
    .mergeMapTo(this.fetchWeatherData())
    .map(res => res.json());
  }

  private fetchWeatherData() {
    return this.http.get('http://myUrl.com/api/weather');
  }

}