I am getting this error

Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". > 

Can't bind to 'ngForOf' since it isn't a known property of 'a'

I already imported all necessary modules: CommonModule, BrowserModule, ReactiveFormsModule

app.module.ts :

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RecipesComponent } from './components/recipes/recipes.component';
import { RecipeListComponent } from './components/recipes/recipe-list/recipe-list.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

recipe-list.component.ts :

<div class="row">
  <div class="col-xs-12">
    <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes"> // error ngFor
      <div class="pull-left">
        <h4 class="list-group-item-heading"> {{ recipe.name}} </h4>
      </div>
      <span class="pull-right">
        <img [src]="recipe.imagePath" alt=" {{recipe.name}} " srcset="" class="img-responsive" style="max-height: 50px">
      </span>
    </a>
    <app-recipe-item></app-recipe-item>
  </div>
</div>

I'm using Angular v13.1.1 / Node v16.13.1 / VSCode v1.63.2