title: Can't bind to 'index' when using ngFor loop Angular
body: <p>I have the following error appear when I try passing the <code>index</code> of a <code>*ngFor</code> loop through into a component. </p>
  
  <p><em>Can't bind to 'count' since it isn't a known property of 'app-details'</em></p>
  
  <p>It seams I can't pass the index through.</p>
  
  <hr>
  
  <p><strong>First file</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { App } from 'reg.interface';
  
  @Component({
    selector: 'reg',
    styleUrls:['reg.component.scss'],
    template:`
      &lt;div class="container"&gt;
      &lt;div class="col-6"&gt;
        &lt;h2&gt;App Details:&lt;/h2&gt;
        &lt;app-details *ngFor="let app of apps; let i = index;"
          [details]="app"
          [count]="i"
        &lt;/app-details&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    `
  })
  
  export class RegComponent {
   apps: App[];
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Second file</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { App } from 'reg.interface';
  
  @Component({
    selector: 'app-details',
    template: `
    &lt;div class="col-12"&gt;
        &lt;span&gt;Index: {{ details | json }}&lt;/span&gt;
        &lt;span&gt;Index: {{ count }}&lt;/span&gt;
    &lt;/div&gt;
    `
  })
  export class AppDetailsComponent {
    @Input()
    app: App;
    count: number;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>reg.interface</strong></p>
  
  <pre><code>export interface App {
    type: string,
    price: number
  }
  </code></pre>
  
  <p>I'm importing the <code>BrowserModule</code> + <code>CommonModule</code> in my main app.module</p>
  
  <p>Any help much appreciated - I can always add more details to the question etc if required. Thanks</p>