ngFor Directive Not Found

Question

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?

Günter Zöchbauer · Answer 1 · 2017-08-31T14:48:21.400

27

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.

edited Aug 31 '17 at 14:48

answered Aug 31 '17 at 14:44

Günter Zöchbauer

623,577
216
2,003
1,567

3

Are you sure you don't have `*ngfor` somewhere in your code instead of `*ngFor` (with capital `F`)? – Günter Zöchbauer Aug 31 '17 at 14:47
1

I figured out the problem, see my answer. It was a webpack issue. Thanks for the help though. – Graham Aug 31 '17 at 14:56
1

I saw, that explains why it all got lowercased. – Günter Zöchbauer Aug 31 '17 at 14:57
I see. Sorry, Seems I accidentally skipped that line. – Günter Zöchbauer Aug 31 '17 at 14:58

score 20 · Answer 2 · answered Aug 16 '18 at 09:21

20

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>

answered Aug 16 '18 at 09:21

PhoneixS

10,574
6
57
73

This has just been my typo, hadn't even realized, thanks! – Laszlo Sarvold May 29 '19 at 08:53

score 12 · Answer 3 · answered Apr 08 '20 at 04:23

12

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'.

answered Apr 08 '20 at 04:23

soni kumari

313
4
4

2

turns out this was my mistake – Miebaka Feb 14 '23 at 10:37

score 5 · Accepted Answer · answered Aug 31 '17 at 14:55

5

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
            }
        }
    ]
}

answered Aug 31 '17 at 14:55

Graham

5,488
13
57
92

1

but where should i update above minimize option tell me file name once. – Nagnath Mungade Dec 18 '19 at 06:18

score 3 · Answer 5 · answered Dec 31 '22 at 18:13

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;
   }

Do you know why can't I import CommonModule into BootstrapApplication(RootCmp, {importProvidersFrom(CommonModule)}), what is the difference between the example I am providing and your example which worked for me? — ezhupa99, May 04 '23 at 21:30

score 0 · Answer 6 · answered Oct 19 '20 at 09:48

0

add app.module.ts :

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

@NgModule({
    imports: [
        CommonModule,
    ],


})
export class AppModule { }

answered Oct 19 '20 at 09:48

Fahimeh Ahmadi

813
8
13

score 0 · Answer 7 · answered Feb 09 '22 at 15:32

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.

score 0 · Answer 8 · answered Apr 04 '23 at 03:42

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.

score 0 · Answer 9 · answered Aug 20 '23 at 07:04

0

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.

answered Aug 20 '23 at 07:04

Aditya Mittal

1,681
16
12

ngFor Directive Not Found

9 Answers9