Errorcan't bind *ngFor - html

Question

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:
The error is located at the app.component.html and it says:
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.
Here is the code that I have for my app.component.html:
<h1><span id="WorldName">{{world.name}}WORLDNAME</span></h1>
<!--<span id="WorldImage"><img [attr.src]="server+world.logo"/></span>-->
<div class="UserData">
<div class="Money">
<span id="MoneyName">Money:</span>
<br>
<!--<span [innerHTML]="world.money | bigvalue"></span>-->
<span>$</span>
</div>
<div class="Buy">
<span id="BuyName">Buy</span>
</div>
<div class="ID">
<span id="MoneyName">ID :</span>
</div>
</div>
<div class="Game">
<div class="UpgradeContainer">
<div class="Upgrade" (click)="setModal('Unlock')">Unlocks</div>
<div class="Upgrade" (click)="setModal('Cash')">Cash</div>
<div class="Upgrade" (click)="setModal('Angels')">Angels</div>
<div class="Upgrade" (click)="setModal('Managers')">Managers</div>
<div class="Upgrade" (click)="setModal('Investors')">Investors</div>
</div>
<div class="ProductContainer">
<app-product *ngFor="let product of products" [product]="product"></app-product>
</div>
</div>
My app.module.ts:
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 { }
My app.component.ts:
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 => { this.world = world; });
}
setModal(value: String){
this.modal = value;
}
}
My product.component.html:
<div class="Product">
<div class="ProductInfo">
<img onclick="alert('Production lancé'), starFabrication() " class="ProductImage" src="./assets/Avatar.jpg">
<!--<mat-progress-bar mode="determinate" class="ProgressBar" [value]="progressbarvalue"></mat-progress-bar>-->
<div class="ProductNumber">ProductNumber</div>
<div class="ProductPrice">ProductPrice</div>
</div>
</div>
And finally my product.component.ts:
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 {
}
}
I'm precising but I'm on Angular 9.
Thanks in advance to anybody who would take the time to help me.

Answer 1

You need to move the #Input() decorator to bind to the product variable. Try the following
export class ProductComponent implements OnInit {
#Input()
product: Product;
constructor() { }
ngOnInit(): void {
}
}
OR
If you wish to use the #Input() decorator with the setter, then you need to bind to it's name in the template.
Controller
export class ProductComponent implements OnInit {
product: Product;
#Input()
set prod(value: Product){
this.product = value;
}
constructor() { }
ngOnInit(): void { }
}
Template
<app-product *ngFor="let product of products" [prod]="product"></app-product>