Property ngforof is not provided by any applicable directive on an embedded template

The error message “property ngforof is not provided by any applicable directive on an embedded template” usually occurs when using the ngForOf directive in Angular without the necessary import or declaration.

The ngForOf directive is used to iterate over a collection of items in Angular templates. It’s commonly used with an ngFor loop to generate HTML content dynamically based on the items in the collection.

To resolve this error, you need to import the CommonModule from ‘@angular/common’ in your module file (usually app.module.ts) and add it to the imports array. The CommonModule provides common directives such as ngFor, ngIf, etc. that are required for Angular templates to work properly.

Here’s an example to illustrate the solution:

    
      // app.module.ts

      import { NgModule } from '@angular/core';
      import { CommonModule } from '@angular/common';

      @NgModule({
        imports: [
          CommonModule
        ]
      })
      export class AppModule { }
    
  

In this example, we import the CommonModule and add it to the imports array of the AppModule. This makes the ngFor directive (and other common directives) available for use in Angular templates within the module.

Once you have imported the CommonModule and added it to the imports array, you should be able to use the ngForOf directive without any issues.