import { Component , ChangeDetectionStrategy } from '@angular/core' ; import { Store } from '@ngrx/store' ; import { Observable } from 'rxjs/Observable' ; import { State , Queries , Model } from 'ngrx-domains' ; @ Component ( { selector : 'bc-collection-page' , changeDetection : ChangeDetectionStrategy . OnPush , template : `
    <md-card>
      <md-card-title>My Collection</md-card-title>
    </md-card>

    <bc-book-preview-list [books]="books$ | async"></bc-book-preview-list>
  ` , /**
     * Container components are permitted to have just enough styles
     * to bring the view together. If the number of styles grow,
     * consider breaking them out into presentational
     * components.
     */ styles : [ `
    md-card-title {
      display: flex;
      justify-content: center;
    }
  ` ] } ) export class CollectionPageComponent { books$ : Observable < Model . Book [ ] > ; constructor ( store ) { this . books$ = store . select ( Queries . VIEWS . getBookCollection ) ; } }