I would like to use ngFor and ngIf insie the template load dynamic.
I used this tutorel by angular.io to load my dynamic template : here
I have app.module :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [
],
})
export class AppModule { }
My second module :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule,
],
providers: [
],
entryComponents: [
Template1Component,
Template2Component,
Template3Component,
],
declarations: [
Template1Component,
Template2Component,
Template3Component,
]
})
export class MyModule { }
the link between appModule and my module by appRoutingModule :
const appRoutes: Routes = [
{ path: 'site', loadChildren: '../myModule.module#MyModule' },
{ path: '**', component: PageNotFoundComponent },
];
export const AppRoutingModule = RouterModule.forRoot(appRoutes);
my template 1 have that :
<ul>
<li *ngfor="let specialite of specialites">
{{specialite.nam}}
</li>
</ul>
everything work but when I use ngfor I have this error :
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngforOf' since it isn't a known property of 'li'. ("
<ul>
<li [ERROR ->]*ngfor="let specialite of specialites">
{{specialite.nam}}
</li>
"): ng:// ........
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".