0

I've created an ng2 component which uses a child ng2 component. The child component represents a list item which gets bound within an ngForOf loop in the parent component:

<div *ngIf="blogPostListItems">
    <ng-template ngFor blogPostListItem [ngForOf]="blogPostListItems | async">
        <div>
            <blog-post-list-item [blogPostListItem]="blogPostListItem"></blog-post-list-item>
        </div>
    </ng-template>
</div>

The following exception is getting logged to the console for each blogPostListItem in the collection:

"Unhandled Promise rejection: Template parse errors:
Can't bind to 'blogPostListItem' since it isn't a known property of 'blog-post-list-item'.

But a blogPostListItem property is defined in my blog-post-list-item.component.ts:

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'blog-post-list-item',
    templateUrl: '../../../ng2/templates/blog-post-list-item.component.html'
})

export class BlogPostListItemComponent
{
    blogPostListItem: Object;
}

So I'm confused about the error message being returned. Any idea why this error might be occurring?

user8334943
  • 1,467
  • 3
  • 11
  • 21
  • 1
    Well it's not an `@Input()`. And why aren't you using `*ngFor` syntax, as the docs explicitly recommend? – jonrsharpe Jul 27 '17 at 21:35
  • hi jon angular has deprecated ngFor in favor of ngForOf: https://angular.io/api/common/NgFor. I'll look into the @Input aspect. thanks! – user8334943 Jul 27 '17 at 21:38
  • 1
    That does not mean what you think it does. You shouldn't use the `NgFor` directive directly, but `*ngFor` is desugared to `NgForOf`. See e.g. https://angular.io/guide/structural-directives#inside-ngfor. Indeed it appears you've [already been told this today](https://stackoverflow.com/a/45357126/3001761). And the docs specifically say [**Prefer the asterisk (*) syntax.**](https://angular.io/guide/structural-directives#prefer-the-asterisk--syntax) – jonrsharpe Jul 27 '17 at 21:39
  • thanks jon. u know ng2 much better than i do. I added the @Input decorator but now I get the following error: "The selector "blog-post-list-item" did not match any elements." any idea what might be causing this issue? – user8334943 Jul 27 '17 at 21:47
  • Please provide an updated [mcve], with all the necessary parts and the traceback. – jonrsharpe Jul 27 '17 at 21:50
  • Looks like the solution for the problem I described in my last comment is to put the ng2 scripts under the html body or put the bootstrap code in an event listener: https://stackoverflow.com/questions/35644123/the-selector-my-app-did-not-match-any-elements. I simply copied the script under the body and now I get a different error but I'm assuming it's a better error: "Cannot read property 'dispose' of null" – user8334943 Jul 27 '17 at 21:56
  • I'd recommend starting from the Angular CLI, it solves a lot of these basic problems for you and makes it easier to focus on developing and testing useful functionality. If you still have a problem, again, a [mcve] is needed. Also it's just Angular, the current version is 4.3 and 5.0 is en route. – jonrsharpe Jul 27 '17 at 22:01

0 Answers0