Angular exception: Can’t bind to ‘ngForIn’ since it isn’t a known native property

by

I typed in instead of of in the ngFor expression.

Befor 2-beta.17, it should be:

<div *ngFor="#talk of talks">

As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info.

Note that the ngFor syntax “desugars” into the following:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

If we use in instead, it turns into

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

Since ngForIn isn’t an attribute directive with an input property of the same name (like ngIf), Angular then tries to see if it is a (known native) property of the template element, and it isn’t, hence the error.

UPDATE – as of 2-beta.17, use the let syntax instead of #. This updates to the following:

<div *ngFor="let talk of talks">

Note that the ngFor syntax “desugars” into the following:

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

If we use in instead, it turns into

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>

More Related Contents:

  1. NgFor doesn’t update data with Pipe in Angular2
  2. Angular: Cannot find a differ supporting object ‘[object Object]’
  3. How to dynamically add a directive?
  4. Angular 2 Scroll to top on Route Change
  5. Difference between [ngClass] vs [class] binding
  6. Apply a directive conditionally
  7. When to use square brackets [ ] in directives @Inputs and when not?
  8. How to make directives and components available globally
  9. Angular 2 Read More Directive
  10. Using a directive to add class to host element [duplicate]
  11. How to pass object from one component to another in Angular 2?
  12. How to import component into another root component in Angular 2
  13. How to detect scroll to bottom of html element
  14. Angular2 Styles in a Directive
  15. What is the difference between component and directive?
  16. Get reference to a directive used in a component
  17. Changing the page title using the Angular 2 new router [duplicate]
  18. How do I support Internet Explorer in an Angular 8 application?
  19. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  20. Wait for Angular 2 to load/resolve model before rendering view/template
  21. How to use/import http module?
  22. What is let-* in Angular 2 templates?
  23. Angular 2 – Routing – CanActivate work with Observable
  24. Cannot read property “totalPrice” of undefined
  25. Angular2: use [(ngModel)] with [ngModelOptions]=”{standalone: true}” to link to a reference to model’s property
  26. Angular 2 Reactive Forms trigger validation on submit
  27. How to manually set focus on mat-form-field in Angular 6
  28. What is the difference between fakeAsync and async in Angular testing?
  29. why lazy loaded module has to import commonModule? Angular 2
  30. How is Angular’s *ngFor loop implemented?

Leave a Comment