title: Errorcan't bind *ngFor
body: <p>I'm a beginner in Angular and I'm trying to create an application that looks like CapitalistAdventure. But I have an error that I can't resolve and would like to receive some help please. First of all here is how looks my app: 
  <a href="https://i.stack.imgur.com/u3fiQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u3fiQ.png" alt="enter image description here"></a></p>
  
  <p>The error is located at the app.component.html and it says: </p>
  
  <p>Can't bind to 'product' since it isn't a known property of 'app-product'.
  1. If 'app-product' is an Angular component and it has 'product' input, then verify that it is part of this module.
  2. If 'app-product' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.</p>
  
  <p>Here is the code that I have for my app.component.html: </p>
  
  <pre><code>  &lt;h1&gt;&lt;span id="WorldName"&gt;{{world.name}}WORLDNAME&lt;/span&gt;&lt;/h1&gt;
    &lt;!--&lt;span id="WorldImage"&gt;&lt;img [attr.src]="server+world.logo"/&gt;&lt;/span&gt;--&gt;
    &lt;div class="UserData"&gt;
      &lt;div class="Money"&gt;
        &lt;span id="MoneyName"&gt;Money:&lt;/span&gt;
        &lt;br&gt;
        &lt;!--&lt;span [innerHTML]="world.money | bigvalue"&gt;&lt;/span&gt;--&gt;
        &lt;span&gt;$&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="Buy"&gt;
        &lt;span id="BuyName"&gt;Buy&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="ID"&gt;
        &lt;span id="MoneyName"&gt;ID :&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Game"&gt;
      &lt;div class="UpgradeContainer"&gt;
        &lt;div class="Upgrade" (click)="setModal('Unlock')"&gt;Unlocks&lt;/div&gt;
        &lt;div class="Upgrade" (click)="setModal('Cash')"&gt;Cash&lt;/div&gt;
        &lt;div class="Upgrade" (click)="setModal('Angels')"&gt;Angels&lt;/div&gt;
        &lt;div class="Upgrade" (click)="setModal('Managers')"&gt;Managers&lt;/div&gt;
        &lt;div class="Upgrade" (click)="setModal('Investors')"&gt;Investors&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ProductContainer"&gt;
        &lt;app-product *ngFor="let product of products" [product]="product"&gt;&lt;/app-product&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My app.module.ts:  </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { RestserviceService } from 'src/app/restservice.service';
  import { HttpClientModule } from '@angular/common/http';
  import { ProductComponent } from './product/product.component';
  import { BigvaluePipe } from './bigvalue.pipe';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {MatProgressBarModule} from '@angular/material/progress-bar';
  @NgModule({
    declarations: [
      AppComponent,
      ProductComponent,
      BigvaluePipe,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      BrowserAnimationsModule,
      MatProgressBarModule,
    ],
    providers: [RestserviceService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My app.component.ts: </p>
  
  <pre><code> import { Component } from '@angular/core';
  import { RestserviceService } from './restservice.service'; 
  import { World, Product, Pallier } from './world';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
    title = 'AngularProject';
    world: World = new World(); 
    server: String;
    products = [1,2,3,4,5,6];
    modal: String;
  
    constructor(private service: RestserviceService) { 
      this.server = service.getServer(); 
      service.getWorld().then(world =&gt; { this.world = world; });   
    }
  
    setModal(value: String){
      this.modal = value;
    }
  }
  </code></pre>
  
  <p>My product.component.html: </p>
  
  <pre><code>&lt;div class="Product"&gt;
    &lt;div class="ProductInfo"&gt;
      &lt;img onclick="alert('Production lancé'), starFabrication() " class="ProductImage" src="./assets/Avatar.jpg"&gt;
      &lt;!--&lt;mat-progress-bar mode="determinate" class="ProgressBar" [value]="progressbarvalue"&gt;&lt;/mat-progress-bar&gt;--&gt;
      &lt;div class="ProductNumber"&gt;ProductNumber&lt;/div&gt;
      &lt;div class="ProductPrice"&gt;ProductPrice&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally my product.component.ts: </p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Product } from 'src/app/world';
  
  @Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
  })
  export class ProductComponent implements OnInit {
    product: Product;
    @Input()
    set prod(value: Product){
      this.product = value;
    }
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  
  <p>I'm precising but I'm on Angular 9.</p>
  
  <p>Thanks in advance to anybody who would take the time to help me.</p>