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