Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular: Can't bind to 'ngForOf' since it isn't a known property of 'li' (used in the '_AppComponent' component template)

I have a app.component.html file

<div class="container">
  <div class="ui card">
    <h1>Team generator</h1>
    <ul class="list">
       <li *ngFor="let member of members">{{ member }}</li>
    </ul>
    <div class="add-members-container">
      <input
        type="text"
        name=""
        placeholder="name"
        id=""
        #addMemberInput
        (input)="onInput(addMemberInput.value)"
      />
      <button (click)="addMember()">Add</button>
    </div>
    <div class="input-container">
      <input type="text" placeholder="#number of teams" name="" id="" />
      <button>Generate</button>
    </div>
  </div>
</div>

and then app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  newMemberName = '';
  members: string[] = [];
  onInput(member: string) {
    this.newMemberName = member;
  }
  addMember() {
    this.members.push(this.newMemberName);
  }
}

and i get error:

Can't bind to 'ngForOf' since it isn't a known property of 'li' (used in the '_AppComponent' component template).

so following:
Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

i created in src/app folder app.model.ts file and added:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [BrowserModule, CommonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

but I got the same error. I started this angular project yesterday so it brand new.
How to make it work if other solutions doesnt help?

EDIT:

<li *ngFor="let member of members">{{ member }}</li>
      <li @for (member of members; track member.index)>{{ member }}</li>

why @for doesnt work?

Tags:

2

Answers


  1. 0

    Import CommonModule, or ngFor into the imports for it to work! The directives need to be imported to the component imports since its standalone (it does not matter if you add it to a module, the imports need to be explicitely defined for the component to use them! Think of the component as isolated (since the module imports are not visible to them) and can be plugged into any place without worrying about module imports! ). Importing all the directives using the CommonModule also works!

    import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule, NgFor } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
       RouterOutlet,
       CommonModule,
       // or
       // NgFor,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  newMemberName = '';
  members: string[] = [];
  onInput(member: string) {
    this.newMemberName = member;
  }
  addMember() {
    this.members.push(this.newMemberName);
  }
}
    Login or Signup to reply.
  2. 0

    If you’re on Angular v17, I’d recommend using the @for block instead of ngFor.

    It provides the same feature but doesn’t require to import the directive or CommonModule.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search