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?

>Solution :

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);
  }
}