The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported

Question

I'm new to angular and I can't use the ngFor component. This is the error:

The *ngFor directive was used in the template, but neither the NgFor directive nor the CommonModule was imported. Use Angular's built-in control flow @for or make sure that either the NgFor directive or the CommonModule is included in the @Component.imports array of this component.

And this is the code:

<h2>List</h2>

<ul>
    <li *ngFor="let c of contacts">
        {{c.id}} - {{c.name}}
    </li>
</ul>

Answer 1

From Angular 17 with standalone components, things like ngFor need to be included in the imports array of your component.

e.g.

@Component({
  selector: 'app-contacts',
  standalone: true,
  imports: [NgFor],
  templateUrl: './contacts.component.html',
  styleUrl: './contacts.component.scss'
})

But better to use the new control flow syntax:

<ul>
  @for (c of contacts; track c.id) {
    <li>{{c.id}} - {{c.name}}</li>
  }
</ul>