title: Angular 2 Passing data from Parent component to child
body: <p>I am passing products from a parent component to a child component using input binding and it works the first time the child component is invoked. I expect change to products in filterProduct() to be reflected in the child every time it is modified in the parent but this is not happening. How do I get this to happen.</p>
  
  <p>Parent template:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
  &lt;div class="col-sm-9"&gt;
      &lt;app-product-card [products]=products&gt;&lt;/app-product-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  
  
  <p>Parent component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'app-appliances-product-card',
    moduleId: module.id,
    templateUrl: 'appliances-product-card.component.html'
  })
  
  export class AppliancesProductCardComponent implements OnInit{    
     products: Product[];
  
     filterProduct(filter) {
       this.products = this.filteredProducts;         
    }
  }
  </code></pre>
  
  <p>Child component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'app-product-card',
    moduleId: module.id,
    templateUrl: 'product-card.component.html'
  })
  
  export class ProductCardComponent {
    @Input() products: Product[];
  }
  </code></pre>