home.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { SharedData } from '../shared-data';

@Component({
  selector: 'app-main',
  template: `
    <button (click)="loadData()">Load data</button>

    <div *ngIf="sharedData.value | async; let data">
      <h3>Data:</h3>
      <ul>
        <li *ngFor="let item of data.items">{{ item }}</li>
      </ul>
    </div>
  `
})
export class MainComponent {
  constructor(public sharedData: SharedData) { }

  async loadData() {
    let data = await this.loadDataFromHttpService().toPromise();      

    this.sharedData.init(data);
  }

  private loadDataFromHttpService() {
    // Simulate loading data from HTTP service
    return Observable.of({ items: ['a', 'b', 'c']}).delay(2000);
  }
}