Why ngfor directive is not working, though I have created proper object in Typescript class

Issue

I have created proper Ingredient object in Typesript, also proper "model" for the object. Though ngfor directive is not working. I am getting this error "NG0303: Can't bind to 'ngforOf' since it isn't a known property of 'a'" on inspecting in browser.

My model code

export class Ingredient {
constructor(public name: string, public amount: number){}

}

My TypeScript code

import { Component, OnInit } from '@angular/core';
import { Ingredient } from '../shared/ingredient.model';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {

  ingredients: Ingredient[] = [

    new Ingredient ("Apple", 5),
    new Ingredient ("Tomato", 5)
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

My HTML code

<div class="row">
    <div class="col-xs-10">
        <app-shopping-edit></app-shopping-edit>
        <hr>
        <ul class = "list-group">
            <a class = "list-group-item" 
            style = "cursor : pointer"
            *ngfor = "let ingredient of ingredients">
            {{ ingredient.name }}({{ ingredient.amount}})
            </a> 
        </ul>
    </div>
</div>

Page is loading properly, but ingredients are not loading. On inspecting in browser this error "NG0303: Can't bind to 'ngforOf' since it isn't a known property of 'a'" is coming.

Can someone please help.

Solution

If you are inside AppModule check if you have BroswerModule in the imports array there. If you are in some different module then check if CommonModule is a part of that module's array. CommonModule provides us with core Angular features like *ngIf or *ngFor in your specific case. Also watch out, you typed *ngfor instead *ngFor.

Answered By - Chaka15