ngFor is not working despite having CommonModule imported in the existing module

user_14866305 0
Viewed 1038

ngFor is not working in my code. I have the following code structure.

  1. AppModule - contains App Component with router-outlet
  2. HomeModule - contains Home Component - uses ngFor. (ngFor works here with no issues)
  3. TestModule - contains Test Module - uses ngFor (ngFor does not work here)

I already have "BrowserModule" import in the AppModule. I also have "CommonModule" import in both HomeModule and TestModule

I have this code in HomeModule home.component.html file (Works as expected)

<mat-card [class]="(selected_test.id === test.id)? 'test-card selected': 'test-card'" *ngFor="let test of tests" (click)="selectCard($event, test)">

  <div class="left">
    <div class="title">{{test.title}}</div>
    <div class="description">{{test.description}}</div>
  </div>

  <div class="right">
    <div class="question-count">{{test.questions.length}} Question{{(test.questions.length > 1?'s':'')}}</div>
  </div>

</mat-card>

I have this code in TestModule test.component.html:

<div *ngFor="let q of test.questions" class="question-item">
  <div class="question-title">{{q.prompt}}</div>
  <div class="question-options">
    <!-- <div *ngFor="let option of question.options" class="question-option">{{option}}</div> -->
  </div>
</div>

Code in snippet 1 works while the code in snippet 2 does not work. I am not sure what is going on with this.

Edit:

app.module.ts 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'
import { MatCardModule } from '@angular/material/card';
import { HomeModule } from './pages/home/home.module';
import { CommonModule } from '@angular/common';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { MatButtonModule } from '@angular/material/button'
import { MatCardModule} from '@angular/material/card'

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    MatButtonModule,
    MatCardModule
  ],
  exports:[
  ]
})
export class HomeModule { }

test.module.ts

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



@NgModule({
  declarations: [TestComponent],
  imports: [
    CommonModule,
  ],
  exports: [
    TestComponent
  ]
})
export class TestModule { }

ng-modules ngfor angular
2 Answers

Try changing the order of imports in the appModule. Make the BrowserModule as the first import.

imports: [
    BrowserModule, 
    AppRoutingModule,   
    RouterModule,
    HttpClientModule,
    NgbModule,
    NgxSpinnerModule,
    ModalModule.forRoot(),
    FormsModule,
    ReactiveFormsModule    
  ],
user_62434720

It's kinda late but I got the same issue and find out how to solve it.

My component's module was never imported (directly or indirectly) in my AppModule where BrowserModule was imported. Then it would not have ngFor directive declared.

In other words, your TestModule must be in AppModule's imports list :

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ..., TestModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Or your module must be imported in one of your other module that is already imported in AppModule :

AppModule [imports] AnyModule(s) [imports] TestModule
user_105246800
Related