Angular 2 *ngFor display component template not working
<p>I have this collection in "results.component.ts":  <code>results: Result[]</code></p>

<p>I would like to iterate over the collection, displaying each result.</p>

<p>I would like to have a seperate component for this called result.component.ts. This is because a result could get complex and large.</p>

<p>What I have so far is not displaying anything. The output html has some commented out template bindings:</p>

<pre><code>&lt;div _ngcontent-fud-12="" class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4"&gt;
            &lt;!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;&lt;!--template bindings={}--&gt;
        &lt;/div&gt;
</code></pre>

<p>Here is my relevant code:</p>

<p>results.component.html:</p>

<pre><code>&lt;div id="results" class="text-uppercase"&gt;
    &lt;div id="up-button-row" class="row"&gt;
        &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4"&gt;
            &lt;button class="m-x-auto" md-fab [disableRipple]="true" (click)="scrollUp()"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row" *ngIf="noResults"&gt;
        &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4"&gt;
            &lt;h2 class="m-x-auto"&gt;No vegan stuff found :-(&lt;/h2&gt;
        &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class="row" *ngIf="!noResults"&gt;
        &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4"&gt;
            &lt;div *ngFor="let result of results"&gt;&lt;result&gt;&lt;/result&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>results.component.ts:</p>

<pre><code>import { Component, AfterViewInit } from '@angular/core';
import { ResultComponent } from './result.component';
import { Result } from '../result'

@Component({
   selector: 'results-div',
   templateUrl: 'app/find-page/results.component.html',
   styleUrls: ['app/find-page/results.component.css' ],
   directives:[ResultComponent]
})
export class ResultsComponent implements AfterViewInit {
   results: Result[];
   noResults: boolean;
   ngAfterViewInit() {
this.scrollDown();
   }

   scrollDown() {
      ScrollToAnchor.goToTargetBottom("#results");
   }

   scrollUp() {
     ScrollToAnchor.goToTarget("#find-page");
   }
}
</code></pre>

<p>result.component.html:</p>

<pre><code>&lt;div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;"&gt;
   &lt;div class="product-item scale-on-hover" (click)="setCurrentlySelectedProduct()"&gt;
      &lt;div [ngStyle]="{background: result.imagePath}" id="image"&gt;&lt;/div&gt;
      &lt;div id="info"&gt;
         &lt;h6 id="brand" class="medium-text"&gt;{{brand}}&lt;/h6&gt;
         &lt;h6 id="name" class="medium-text"&gt;{{name}}&lt;/h6&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>result.component.ts:</p>

<pre><code>import { Component, AfterViewInit } from '@angular/core';
import { Result } from '../result';

@Component({
   selector: 'result',
   templateUrl: 'app/find-page/result.component.html',
   styleUrls: ['app/find-page/result.component.css' ]
})
export class ResultComponent{}
</code></pre>

<p>How do I pass the result data for 1 result from results.component to result.component. </p>

<p>How do I get the result.component.html to display once for each result?</p>