Angular 17 error: Can't bind to 'ngForOf' since it isn't a known property of 'li'

Question

Here is the code that is throwing error: user-list.component.html:

<ul>
    <li *ngFor="let name of names">Hello {{ name }}</li>
</ul> 

Error:

NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'li' (used in the '_UserListComponent' component template).
1. If 'li' is an Angular component and it has the 'ngForOf' input, then verify that it is included in the '@Component.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.      
NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'li' (used in the '_UserListComponent' component template).
1. If 'li' is an Angular component and it has the 'ngForOf' input, then verify that it is included in the '@Component.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

While app.component.ts :

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world/hello-world.component';
import { UserItemComponent } from './user-item/user-item.component';
import { UserListComponent } from './user-list/user-list.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, HelloWorldComponent,UserItemComponent, UserListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'app1';
}

Where is the problem as i imported common module ?!

Cassondracassoulet

Answer 1

If you're using standalone:true you need to import NgFor or Common module in you UserListComponent

Hemmer

Feel free to upvote and accept the answer ! – Hemmer

I need at least 15 reputation to cast a vote – Cassondracassoulet

Answer 2

Your error clearly means that angular doesn't recognize the "ngForOf" directive used inside you

in the '_UserListComponent' component template.

Resolve that by importing CommonModule in the import array of your _UserListComponent

@Component({
  selector: '',
  standalone: true,
  imports: [CommonModule],
  templateUrl: '',
  styleUrl: '',
})

export class _UserListComponent {}

Godly

Answer 3

another way to do that for loop in angular 17

 @for (account of accountList; track account.name) {
    <ion-col size="6">
      <ion-card>
        <ion-card-content style="font-size: x-large;">
          <ion-icon [name]="account.icon.name" [style]="{'color': account.icon.color}"></ion-icon>
          <p style="font-size: large;">{{ account.name }}</p>
          <span style="font-size: xx-large;">
            {{ account.balance }} {{ account.currency.name }}
          </span>
        </ion-card-content>
      </ion-card>
    </ion-col>
  } @empty {›
    <ion-col size="6">
      <ion-card>
        <ion-card-content>
          <p>Hi</p>
          <span style="font-size: medium;">
            Create your first account and track all your spendings.
          </span>
        </ion-card-content>
      </ion-card>
    </ion-col>
  }

for more information you can read this article https://blog.angular-university.io/angular-for/

Repatriate

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Aggiornamento