title: angular2 how to use complex observable without duplicate subscription
body: <p>I have a class Page(definition below) and service which returns an observable Page. How do I use the observable properly without duplicate subscriptions. Plunker(not working) <a href="http://plnkr.co/edit/8xwclHsGm2jKdW9A0fZ4?p=preview" rel="nofollow">http://plnkr.co/edit/8xwclHsGm2jKdW9A0fZ4?p=preview</a> </p>
  
  <pre><code>export class Page&lt;T&gt;{
    content: Array&lt;T&gt; = new Array();
    last: boolean = true;
    totalPages: number = 0;
    totalElements: number = 0;
    size: number = 0;
    number: number = 0; // Page number
    first: boolean = true;
    numberOfElements: number = 0; //Number of elements in current page
  }
  
  
  export class DataGridService {
    getPageForGrid(gridName:string):Observable&lt;Page&lt;any&gt;&gt;{
      return anObservable; //code removed. see plunker
    }
  }
  
  
  @Component({
      selector: 'data-grid',
      changeDetection: ChangeDetectionStrategy.OnPush,
      template: `&lt;div class="row"&gt;
    &lt;ul&gt;
      &lt;li&gt;Page size: {{page.size}}&lt;/li&gt;
      &lt;li&gt;Number: {{page.number}}&lt;/li&gt;
      &lt;li&gt;Total pages: {{page.totalPages&lt;/li&gt;
      &lt;li&gt;Total Elements: {{page.totalElements}}&lt;/li&gt;
      &lt;li&gt;Number of elements:{{page.numberOfElements}}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div&gt;
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr *ngFor="#row of page.content; #i = index"&gt;
            &lt;td&gt;{{row['column1']}}&lt;/td&gt;
            &lt;td&gt;{{row['column2']}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;`,
  providers:[DataGridService]
  })
  export class DataGridComponent {
    @Input gridName: string;
  
    page: Observable&lt;Page&lt;any&gt;&gt;;
  
    constructor(){
      this.dataGridService = new DataGridService();
    }
  
    ngOnChanges(changes){
      this.page = this.dataGridService.getPageForGrid(this.gridName);
    }
  }
  </code></pre>