Using data from Observable Angular 2

1. If you need the data in the component as well, you can just subscribe to it. BUT maybe you should not (see below)...

2. it's there that you use the operators, you can combine observables to define a custom data flow:

foo$: Observable < Foo[] > ;
randomClickEvent = new Subject < clickEvent > ();

ngOnInit() {
    let initialFetch = this.fooService.getData().share()
    this.foo$ = Observable.merge(
      initialFetch, // need the initial data
      initialFetch.flatMap(foos => { 
        this.randomClickEvent.switchMap(() => { //listen to click events
          return this.fooService.getMore().map((moreFoos: Foo[]) => { //load more foos
            return foos.concat(...moreFoos) //initial foos values + new ones
          })
        })
      })
    );
  }

<span *ngFor="let foo of (foo$|async)">{{foo.name}}</span>
<button (click)="randomClickEvent.next($event)">Load More foos !</button>

Most of people just use simple operators like map(),do(), etc and manage their subscription imperatively, but it is usually better to not subscribe, so you avoid many side effects and some "Ooops I forgot to unsubscribe here". usually you can do everything you need without subscribing.

Observables exist to describe a data flow, nothing more, nothing less. It's a paradigm of functional programming: you don't define how things are done, but what they are. Here, this.foo$ is a combination of the initial fooService.getData() and every fooService.fetchMore() that may occur.