Error: Can't bind to 'ngForOf' since it isn't a known property of 'ion-item'.

I was recently refactoring my code and deleting the files that I thought  were not needed. I was deleting them and after that, I start to get errors where ngFor and ngIf were not working. Here I have written a demo code to explain those errors.

Error: NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-item'.

 

 

Code With Error:

Home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  days: string[]=["Sunday", "Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

  constructor() {}

}

 

Home.page.html

<ion-item *ngFor="let day of days" >
  <h2> {{day}} </h2>
</ion-item>

 

Home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    //CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}
Explanation: This error occurs when you use ngIf/ ngFor in the component, where you have not imported CommonModule
 

Fix: To fix this you have to import the CommonModule in the module file which is used by that HTML file. Here I am using ngFor in the home.page.html. and the home page has its own module file home.module.ts. So Adding CommonModule in the imports array in the module file fixes this error. 

  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],

Note: If your component where you are using ngFor/ngIf does not have a module file, then check its parent component where you have declared that component. and import the CommonModule from there if not present. This error can occur in the case of a typo as well [ For e.g. **ngFor/ *ngfor].

Thank you, Hope this is helpful.

References:

1. CommonModule - https://angular.io/api/common/CommonModule

2. https://stackoverflow.com/questions/40331549/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-final-release#:~:text=There%20can%20be%20any%20possible,**ngFor%20or%20*ngfor%20etc.

 

Add comment