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:

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {

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

  constructor() {}


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



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

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

  imports: [
  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 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: [

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.


1. CommonModule -



Add comment