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

Vick Sain

I was trying to learn angular. But I am getting some issue.

In it, I am using lazy loading module base. I create a admin module and also call it in app.module. I also add commonModule in admin.module.ts and BrowserModule in app.ts.

On adding the array, I getting the issue.

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

Here is the screenshot of error

[![enter image description here][1]][1]

Here is admin.module

  import { NgModule } from '@angular/core'; 
import { CommonModule } from "@angular/common";
import { HttpClientModule } from '@angular/common/http';
import { AdminRoutingModule } from './admin-routing.module';

import { AdminComponent } from './admin.component'; 
import { AdminHeaderComponent } from '../shared/admin-header/admin-header.component';
import {AdminSidebarComponent } from '../shared/admin-sidebar/admin-sidebar.component';

import {galleryService} from '../services/gallery.service';

@NgModule({
    imports: [
      CommonModule,
      AdminRoutingModule,
        HttpClientModule
    ],
    declarations: [ 
      AdminComponent, 
      AdminHeaderComponent,
      AdminSidebarComponent
    ],
  
     providers: [
       galleryService
    ]
})
export class AdminModule { }



App.ts

import { BrowserModule } from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import { NgModule } from '@angular/core';

import {AdminModule} from './admin/admin.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoginComponent } from './general/login/login.component';
import { RegisterComponent } from './general/register/register.component';
import { AdminComponent } from './admin/admin.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

import { AuthGuard } from'./general/auth.guard'
import { SecurityService } from './services/security.service';
import { ErrorService } from './services/error.service';

import { ReactiveFormsModule } from '@angular/forms';

import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import {JwtInterceptor, ErrorInterceptor} from './_helper';

// used to create fake backend
import { fakeBackendProvider } from './_helper';
import { CardComponent } from './shared/card/card.component'; 


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent,
    RegisterComponent,
    CardComponent 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
      AdminModule,
      ReactiveFormsModule,
      HttpClientModule,
      BrowserAnimationsModule, // required animations module
      ToastrModule.forRoot() // ToastrModule added
  ],
  providers: [AuthGuard, SecurityService, fakeBackendProvider,
      {
          provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true
      },
      {
          provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true
      }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is the HTML

<div class="container-fluid">
          <div class="row">
            
            <div class="col-md-4" *ngFor="let item of gallerylist">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title card-header-primary">Simple Table</h4>
                  <p class="card-category"> Here is a subtitle for this table</p>
                </div>
                <div class="card-body">
                   
                </div>
              </div>
            </div>
             
          </div>
        </div>

list.component.ts


getGallery(){
    this.gallery.getAllGallery().subscribe((data: any) => {
        this.gallerylist = data;
        console.log(this.gallerylist);
    })
  }

[![enter image description here][5]][5]

I also studied the previous articles but I did not getting solution. Please help me.

Thanks in advance.

Vick Sain

After checking everthing and its goes fine. Than you have to check angular.json file.

May be you added any jquery script which create any element through script.

I fix it by removing the unwanted script from angular.json.

Thanks

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

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

Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

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

Can't bind to 'mdDatepicker' since it isn't a known property of 'input'

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

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

Angular: ternary operator in ngFor throw error Can't bind to 'ngFor' since it isn't a known property of 'div'

Error: Can't bind to 'ngModel' since it isn't a known property of

Can't bind to 'formControl' since it isn't a known property of 'select'

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

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

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

Can't bind to 'ngForOf' since it isn't a known property of 'tr' in Angular 9

Can't bind to 'ngForOf' since it isn't a known property of 'li' Angular 9

Warning in console Angular 9: Can't bind to 'ngForOf' since it isn't a known property of 'li'

Angular 10 Can't bind to 'ngForOf' since it isn't a known property of 'option'

Can't bind to 'ngForOf' since it isn't a known property of 'ng-container'

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

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

Can't bind to 'ngForOf' since it isn't a known property of 'li' in ngFor Angular

Angular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'

Template parse errors -> Can't bind to 'ngforOf' since it isn't a known property of 'ion-item'

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

How to fix "Can't bind to 'ngForOf' since it isn't a known property of <child component>" if ContentChildren used

Can't bind to 'ngForOf' since it isn't a known property of 'div'. when ever make change in html files

Can't bind to 'ngModel' since it isn't a known property of 'input'?

ngForOf' since it isn't a known property of 'tr'

Can't bind to 'ngForOf' since it isn't a known property of 'tr'. CommonModule and BrowserModule are imported

jasmine thorw ERROR: 'NG0303: Can't bind to 'options' since it isn't a known property of 'div'.'