CODEWITHSUNDEEP
angularangular2-directives
Graham
Graham

Reputation: 5904

ngFor Directive Not Found

I am using Angular 4.3.3 with the JIT compiler and get the error below when I run my application:

Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the @NgModule.declarations.

I have made sure to import the BrowserModule in my main app module and I've imported the CommonModule in my child module that this error is originating from.

Here is the template that throws the error:

<div class="background"></div>
<div class="content normal-page">
    <ons-fab position="top right" ripple>+</ons-fab>
    <ons-list>
        <ons-list-item *ngFor="let item of items; let i = index">
            <div class="center">
                #{{i}} msg: {{item.msg}}
            </div>
        </ons-list-item>
    </ons-list>
</div>

Since I am importing the proper modules into the right places what could be causing this error?

Upvotes: 23

Views: 35964

Answers (10)

Sudhanshu kumar
Sudhanshu kumar

Reputation: 15

You just have to include imports: [CommonModule], in your @Component Section.

@Component({
selector: 'courses', //This is a css selector. If <div class="courses"> selector='.courses'
                         //if <div id="courses"> selector='#courses'
standalone: true,
imports: [CommonModule],
template: `
<h2>{{ title }}</h2>
<ul>
    <li *ngFor="let course of courses">
        {{course}}
    </li>
</ul>`,

})

Upvotes: 0

Aditya Mittal
Aditya Mittal

Reputation: 1771

My issue was I wrote 'as' instead of 'of'

let o of options

Basically, any syntax error like missing let, not capitalizing ngFor, or writing 'as' can cause this.

Upvotes: 1

danilo
danilo

Reputation: 9425

In Ionic 6, in my home page I needed to add CommonModule:

import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
...
  imports: [CommonModule]
})
export class HomePage implements OnInit {

I'm using blank template. If you are using page with modules, you'll need to add CommonModule in your page module.

enter image description here

Upvotes: -1

Abel Chipepe
Abel Chipepe

Reputation: 462

If you are using standalone components with Angular 14 or 15, you can import CommonModule into you component or deconstruct and grab NgForOf:

import {Component} from '@angular/core'
import {Link} from "./link";
import {Container} from "./container";
import {menu} from "../../db/db";
import {NgFor, NgForOf} from "@angular/common";
@Component({
  selector: 'navigation',
  template: `
    <nav class="bg-white border-b border-gray-100">
      <container>
       <ul class="flex space-x-5">
            <li *ngFor="let link of menu">
            <nav-link href="">{{link.name}}</nav-link>
            </li>
        </ul>
      </container>
    </nav>
  `,
  standalone: true,
  imports: [
      Link, 
      Container, 
      NgForOf
      ],
   }) export class Navigation { 
      menu = menu;
   }

Upvotes: 6

Chris W
Chris W

Reputation: 135

You also need to ensure that the component you're working on is declared in your module.ts file.

e.g. In your Component while where you're using the *ngFor:

@Component({
  ...
  template: '<div *ngFor="let thing of things">..</div>'
})
export class MyComponent {...

This component must also be declared in your module.ts file:

@NgModule({
  ...
  declarations: [
    MyComponent
  ]

I use a VS Code extension that creates my components for me, but doesn't register them in the app module, and I often forget to do it manually, causing this problem.

Upvotes: 0

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1027

add app.module.ts :

import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule,
    ],


})
export class AppModule { }

Upvotes: 0

soni kumari
soni kumari

Reputation: 407

Sometimes it can happen when you use

*ngFor="let data in dataList">{{data}}

Try changing it to

*ngFor="let data of dataList">{{data}}

You need to replace 'in' by 'of'.

Upvotes: 19

PhoneixS
PhoneixS

Reputation: 11036

Sometimes it could happen when you forgot the let in the for like:

<span *ngFor="teacher of teachers">{{teacher}}</span>

And it should be:

<span *ngFor="let teacher of teachers">{{teacher}}</span>

Upvotes: 23

Graham
Graham

Reputation: 5904

I figured out the problem, I had webpack minimizing my templates. Once I turned minimizing off then it works fine.

{
    test: /\.html$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                minimize: false
            }
        }
    ]
}

Upvotes: 5

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658087

The NgModule that contains your component needs to have CommonModule in imports

@NgModule({
  ...,
  imports: [CommonModule],
})
export class MySharedModule {}

Also binding ngforOf not used indicates that you are using *ngfor instead of *ngFor with capital F.

Upvotes: 30

Related Questions