Can't bind to 'index' when using ngFor loop Angular

Question

I have the following error appear when I try passing the index of a *ngFor loop through into a component.

Can't bind to 'count' since it isn't a known property of 'app-details'

It seams I can't pass the index through.

First file

import { Component } from '@angular/core';
import { App } from 'reg.interface';

@Component({
  selector: 'reg',
  styleUrls:['reg.component.scss'],
  template:`
    <div class="container">
    <div class="col-6">
      <h2>App Details:</h2>
      <app-details *ngFor="let app of apps; let i = index;"
        [details]="app"
        [count]="i"
      </app-details>
    </div>
  </div>
  `
})

export class RegComponent {
 apps: App[];
}

Second file

import { Component, Input } from '@angular/core';
import { App } from 'reg.interface';

@Component({
  selector: 'app-details',
  template: `
  <div class="col-12">
      <span>Index: {{ details | json }}</span>
      <span>Index: {{ count }}</span>
  </div>
  `
})
export class AppDetailsComponent {
  @Input()
  app: App;
  count: number;
}

reg.interface

export interface App {
  type: string,
  price: number
}

I'm importing the BrowserModule + CommonModule in my main app.module

Any help much appreciated - I can always add more details to the question etc if required. Thanks

App-details selector should be app-details and not <app-details></app-details> — MorKadosh
– MorKadosh, Commented May 19, 2017 at 9:22
Hi, thanks for the note - I've changed that but still get the same error — fidev
– fidev, Commented May 19, 2017 at 9:27

Milad · Accepted Answer · 2017-05-19 09:27:35Z

2

export class AppDetailsComponent {
  @Input() app: App;
  @Input() count: number;
}

answered May 19, 2017 at 9:27

Milad

28.7k11 gold badges78 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fidev Over a year ago

Boom! Nice one! A new input for every input..! Can't believe I missed that one!

Collectives™ on Stack Overflow

Can't bind to 'index' when using ngFor loop Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related