Keep list updated

Ionic Framework ionic-v3
1

I want to update the list of my component in two ways.

Automatic - Refresh if there is no update or if the last update was more than 30 minutes ago.
Manual - If the user does not want to wait until the next update, he can update manually at any time.
When the user leaves the page cancel the automatic refresh and when he comes back re-initialize. I do not want to update immediately when the user enters the page, but only when it completes 30 minutes since the last update.

What would be the best way to achieve this? I wonder if the updates can conflict, and if yes how to cancel all and proceed only with the last call?

I’m new to AngularJS 2 and I’m a bit confused with the Observables. Here is what I have:

import { Component } from '@angular/core';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/mergeMap';
import "rxjs/add/observable/interval";

import { NavController } from 'ionic-angular';

import { EventData } from '../../providers/event-data';

@Component({
  selector: 'page-event-list',
  templateUrl: 'event-list.html'
})
export class EventListPage {
  public events = [];
  private subscription;

  constructor(public navCtrl: NavController, public eventData: EventData) {}

  ionViewDidEnter() {
    this.load();
  }

  ionViewDidLeave() {
    this.cancel();
  }

  load() {
    let observable = Observable
      .interval(10000)
      .flatMap(() => {
        return this.eventData.load();
      })
      .share();

    this.subscription = observable
      .subscribe(events => this.events = events, error => console.log(error));

    return observable;
  }

  reload(refresher) {
    this.load()
      .subscribe(null, null, () => refresher.complete());
  }

  cancel() {
    if (this.subscription.closed) {
      return;
    }

    this.subscription.unsubscribe();
  }

}