ngFor is not working

I figured out the problem, I had webpack minimizing my templates. Once I turned minimizing off then it works fine.

{
    test: /\.html$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                minimize: false
            }
        }
    ]
}

Sometimes it could happen when you forgot the let in the for like:

<span *ngFor="teacher of teachers">{{teacher}}</span>

And it should be:

<span *ngFor="let teacher of teachers">{{teacher}}</span>

Sometimes it can happen when you use

*ngFor="let data in dataList">{{data}}

Try changing it to

*ngFor="let data of dataList">{{data}}

You need to replace 'in' by 'of'.


The NgModule that contains your component needs to have CommonModule in imports

@NgModule({
  ...,
  imports: [CommonModule],
})
export class MySharedModule {}

Also binding ngforOf not used indicates that you are using *ngfor instead of *ngFor with capital F.