Can't bind to 'product' since it isn't a known property of 'app-product'

While running your Angular project you might see the following error like “Can’t bind to ‘product’ since it isn’t a known property of ‘app-product‘”. If you get template parse errors as shown below

Error: Template parse errors:
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. ("<div>
<app-product *ngFor="let product of products" [ERROR ->][product]="product">
</app-product>
</div>
"): ng:///AppModule/AppComponent.html@1:46

Solution for Can’t bind to property error

Look at the first point below the error

“1. If ‘app-product’ is an Angular component and it has ‘product’ input, then verify that it is part of this module“

Open the specific component (in this case “product.component.ts“) file and check whether your property “X” ( in this case it is “product”) defined in your component with @Input() decorator.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  
  product: Product;

  constructor() { }

  ngOnInit() {
  }

}

In the above code the property ‘product‘ is not defined with @Input() decorator. Try to do the following changes, first update your import statement to include “Input” from “@angular/core” and add @Input() decorator for “product” property as shown below

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  
  @Input() product: Product;

  constructor() { }

  ngOnInit() {
  }

}

Once you made those changes, the code should get compiled successfully and run. Hope this resolves your issue 🙂

Related Posts

Reference

Angular Input Documentation