title: Angular 2: Parent-Child Component Property Binding
body: <p>How do you property bind a child component? I want to make my variable <code>high</code> to <code>false or !this.high</code> through its parent component but the thing is, the child is being looped</p>
  
  <p><strong>app-product</strong></p>
  
  <pre><code>&lt;button class="ui primary small button"(click)="clearVals()"&gt;Clear Selected&lt;/button&gt;
  &lt;app-product-list [dataSource]="data"&gt;&lt;/app-product-list&gt;
  
  
  @ViewChild(ProductListComponent) prodList: ProductListComponent;
  clearVals() {
      this.selectedOutsourced = this.selectedPrice = 0;
      this.prodList.clear();
      this.selectedArray = [];
  }
  </code></pre>
  
  <p><strong>app-product-list</strong></p>
  
  <pre><code>&lt;div class="products-cards" *ngFor="let product of dataSource['docs']"&gt;
        &lt;app-product-card [product]="product"(highlightEvent)="highlight($event)"&gt;
        &lt;/app-product-card&gt;
  &lt;/div&gt;
  
  
  @ViewChild(ProductCardComponent) prodCard: ProductCardComponent;
  </code></pre>
  
  <p><strong>app-product-card</strong></p>
  
  <pre><code>&lt;div class="list card ui" (click)="highlight()" [class.selected]="high"&gt; &lt;/div&gt;
  
  
  high : boolean = false;
  highlight(){
       this.high = !this.high;
  }
  </code></pre>
  
  <p>That is the order of the parenting. The topmost is the parent down to its child</p>