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

Question

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

AppModule - contains App Component with router-outlet
HomeModule - contains Home Component - uses ngFor. (ngFor works here with no issues)
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 { }

Couple questions: are there any other errors at the top of the `ng serve` log, and are these modules lazy loaded or using a shared module? — Nathan Beck, Dec 21 '20 at 15:56
this first you use `tests` and the second you use `test` - are you sure you are providing a single test object in the `TestModule`? — Randy Casburn, Dec 21 '20 at 16:22
Can you confirm whether `test.questions` holding the array or not? — Sivakumar Tadisetti, Dec 21 '20 at 16:22
@NathanBeck - There are no other errors, neither in the terminal nor in browser. These modules are just being loaded using a router outlet. Currently there is no lazy loading — shazim, Dec 22 '20 at 04:23
@RandyCasburn - HomeModule is rendering the titles for multiple tests, that is why is a plural. In the TestModule, I am only passing a single test. — shazim, Dec 22 '20 at 04:25
@SivakumarTadisetti - I have already tried logging the output in ngOnInit() and it shows the expected output. — shazim, Dec 22 '20 at 04:26

score 1 · Answer 1 · answered Dec 21 '20 at 16:22

1

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    
  ],

answered Dec 21 '20 at 16:22

Malith

506
5
9

BroswerModule is already the first import. – shazim Dec 22 '20 at 04:26

score 1 · Answer 2 · edited Jun 28 '21 at 11:53

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

score 1 · Answer 3 · answered Jul 18 '23 at 09:52

1

In my case, i was lazy loading my featureModule while it is not imported to the HomeModule.

answered Jul 18 '23 at 09:52

Midhun P

11
1

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

3 Answers3