Can't bind to 'ngForOf' since it isn't a known property of 'div'

Question

When adding an ngFor to a div I get the following warning and it appears to be stopping my HTML from rendering.

I only have the one module on my app and the BrowserModule is imported in the imports which seemed to fix the problem for most people but it's not working for me.

HTML:

<div *ngFor="let animal of animals" class="animal-row">
    <img />
    <div class="animal-info">
        <p class="animal-name"><i class="fad fa-monkey"></i> Alfie (Alifie-Moon)</p>
        <div class="row">
            <div id="species" class="col">
                <p id="species-text"><i class="fad fa-paw-claws"></i> <span>Skunk</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-paw"></i> <span>American</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-home-heart"></i> <span>01.01.01</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-watch-fitness"></i> <span>3 Years</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-hotel"></i> <span>1-A</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-smile"></i> <span>Good</span></p>
            </div>
        </div>
    </div>
</div>

app.module.ts:

// Angular & 3rd Part Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastNotificationsModule } from 'ngx-toast-notifications';
import { RouterModule } from '@angular/router';
import { JwtModule } from '@auth0/angular-jwt';
// Providers
import { ErrorInterceptorProvider } from './_services/error.interceptor';
// Services
import { AuthService } from './_services/auth.service';
import { ModuleService } from './_services/module.service';
// Components
import { appRoutes } from './routes';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SubnavComponent } from './subnav/subnav.component';
import { CommonModule } from '@angular/common';

export function tokenGetter() {
   return localStorage.getItem('token');
}


@NgModule({
   declarations: [
      AppComponent,
      NavComponent,
      LoginComponent,
      DashboardComponent,
      SubnavComponent
   ],
   imports: [
      BrowserModule,
      CommonModule
      BrowserAnimationsModule,
      HttpClientModule,
      FormsModule,
      ToastNotificationsModule,
      RouterModule.forRoot(appRoutes),
      JwtModule.forRoot({
         config: {
            // tslint:disable-next-line: object-literal-shorthand
            tokenGetter: tokenGetter,
            whitelistedDomains: ['localhost:5000'],
            blacklistedRoutes: ['localhost:5000/api/auth']
         }
      })
   ],
   providers: [
      AuthService,
      ErrorInterceptorProvider,
      ModuleService
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

I don't know if this is relevant but I did have a file called module.ts (that was an interface) that I renamed to navLinks, just in case it created a conflict - is it possible Angular thought that was another module?

You are missing , after CommonModule is that typo in code or in this question? — Savan Padaliya
– Savan Padaliya, Commented Apr 9, 2020 at 4:27

Web Develop Wolf · Accepted Answer · 2020-04-09 04:53:45Z

28

Turns out the problem was that I hadn't declared my component I was working on in app.module.ts - as soon as that was declared this resolved the issue

answered Apr 9, 2020 at 4:53

Web Develop Wolf

6,36613 gold badges63 silver badges117 bronze badges

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

1 Comment

Shashank Vivek Over a year ago

I saw ` AppComponent,` in declaration section of code

WasiF · Accepted Answer · 2022-03-16 11:10:11Z

19

There can be any one of the reasons:

Your module does not have CommonModule in imports[]
Your component, where you are using *ngFor, is not a part of any module i.e. appModule imported CommonModule because *ngFor and *ngIf etc are initialized in CommonModule.
You might have syntax error in *ngFor i.e. **ngFor or *ngfor etc. typo.
If everything seems fine then restart your IDE i.e. VS Code, IntelliJ etc.

edited Mar 16, 2022 at 11:10

answered Jan 21, 2021 at 11:43

WasiF

29.2k16 gold badges130 silver badges137 bronze badges

2 Comments

kin Over a year ago

I want to share an example of second point. my main component will dynamically generate AlertComponent when meet an error, and the AlertComponet is using ngFor directive. but I didn't declare AlertComponent in declarations.

Ctrl-Zed Over a year ago

Oh WOW! #1. You made me so happy! :)

Shashank Vivek · Accepted Answer · 2020-04-09 04:08:26Z

3

Add BrowserModule and CommonModule in @NgModule

@NgModule({
   import: [BrowserModule,CommonModule]
})

Take a look at this link

answered Apr 9, 2020 at 4:08

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

5 Comments

Web Develop Wolf Over a year ago

Added the CommonModule, but same problem

Shashank Vivek Over a year ago

@WebDevelopWolf Are you sure you are adding in correct module.ts ? Can you please double check and confirm

Web Develop Wolf Over a year ago

I'll edit my post above to show where I've added the CommonModule

Web Develop Wolf Over a year ago

I don't know if this is relevantbut I did have a file called module.ts (that was an interface) that I renamed to navLinks, just in case it created a conflict - is it possible Angular thought that was another module?

Shashank Vivek Over a year ago

@WebDevelopWolf : Nope . is should not create conflict. You need to add NgModule to let angular know that its a module

Palak Jadav · Accepted Answer · 2020-04-09 04:13:07Z

0

Whenever we break our application to have a multilevel parent and child structure of modules, we may face this issue. In my application there is the main app module known as app.module.ts and also other child modules that we’re unable to access this directive globally.

To resolve this issue we need to import BrowserModule in the application’s main module i.e app.module.ts file and also import CommonModule in the child module.

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

answered Apr 9, 2020 at 4:13

Palak Jadav

1,2901 gold badge13 silver badges27 bronze badges

3 Comments

Web Develop Wolf Over a year ago

I only have the one app.module.ts file - as far as I'm aware I haven't added any other modules

Web Develop Wolf Over a year ago

I don't know if this is relevantbut I did have a file called module.ts (that was an interface) that I renamed to navLinks, just in case it created a conflict - is it possible Angular thought that was another module?

Palak Jadav Over a year ago

can you create stackblitz for this ?

Collectives™ on Stack Overflow

Can't bind to 'ngForOf' since it isn't a known property of 'div'

4 Answers 4

1 Comment

2 Comments

5 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

5 Comments

3 Comments

Linked

Related