title: How do I filter an array with TypeScript in Angular 2?
body: <p>ng-2 parent-child data inheritance has been a difficulty for me. </p>
  
  <p>What seems that could be a fine working practical solution is filtering my total array of data to an array consisting of only child data referenced by a single parent id.
  In other words: data-inheritance becomes data filtering by one parent id. </p>
  
  <p>In a concrete example this can look like: filtering a books array to only show the books with a certain <code>store_id</code>.</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, Input} from 'angular2/core';
  
  export class Store {
    id: number;
    name: string;
  }
  
  export class Book {
    id: number;
    shop_id: number;
    title: string;
  }
  
  @Component({
    selector: 'book',
    template:`
      &lt;p&gt;These books should have a label of the shop: {{shop.id}}:&lt;/p&gt;
  
      &lt;p *ngFor="#book of booksByShopID"&gt;{{book.title}}&lt;/p&gt;
    `
  ])
  export class BookComponent {
    @Input()
    store: Store;
  
    public books = BOOKS;
  
    // "Error: books is not defined"
    // ( also doesn't work when books.filter is called like: this.books.filter
    // "Error: Cannot read property 'filter' of undefined" )
    var booksByStoreID = books.filter(book =&gt; book.store_id === this.store.id)
  }
  
  var BOOKS: Book[] = [
    { 'id': 1, 'store_id': 1, 'name': 'Dichtertje' },
    { 'id': 2, 'store_id': 1, 'name': 'De uitvreter' },
    { 'id': 3, 'store_id': 2, 'name': 'Titaantjes' }
  ];
  </code></pre>
  
  <p>TypeScript is new to me, but I think I am close to making things work here.</p>
  
  <p>(Also overwriting the original books array could be an option, then using <code>*ngFor="#book of books"</code>.)</p>
  
  <p><strong>EDIT</strong>
  Getting closer, but still giving an error.</p>
  
  <pre class="lang-ts prettyprint-override"><code>//changes on top:
  import {Component, Input, OnInit} from 'angular2/core';
  
  // ..omitted
  
  //changed component:
  export class BookComponent implements OnInit {
    @Input() 
    store: Store;
  
    public books = BOOKS;
  
    // adding the data in a constructor needed for ngInit
    // "EXCEPTION: No provider for Array!"
    constructor(
      booksByStoreID: Book[];
    ) {}
  
  
    ngOnInit() {
      this.booksByStoreID = this.books.filter(
        book =&gt; book.store_id === this.store.id);
    }
  }
  
  // ..omitted
  </code></pre>