Angular 9 : Can't bind to 'itemElem' since it isn't a known property of

This tutorial guides you on how to resolve Angular 9 application error Can’t bind to ‘itemElem’ since it isn’t a known property of ‘app-item-element’ that you are getting when running the below angular code.

Error: Can’t bind to ‘itemElem’ since it isn’t a known property of ‘app-item-element’

core.js:8268 Can't bind to 'itemElem' since it isn't a known property of 'app-item-element'.
warnAboutUnknownProperty @ core.js:8268
core.js:4127 ERROR TypeError: Cannot read property 'title' of undefined
    at ItemElementComponent_Template (template.html:3)
    at executeTemplate (core.js:7757)
    at refreshView (core.js:7626)
    at refreshComponent (core.js:8772)
    at refreshChildComponents (core.js:7419)
    at refreshView (core.js:7676)
    at refreshEmbeddedViews (core.js:8726)
    at refreshView (core.js:7650)
    at refreshComponent (core.js:8772)
    at refreshChildComponents (core.js:7419)

When you get like the above error for example, while running the following Angular 9 code.

app.component.html

<div class="container">
  <app-create-item (itemAdded)="onItemAdded($event)"
                   (itemSpecAdded)="onItemSpecAdded($event)"></app-create-item> 
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-item-element *ngFor="let elem of itemElems"
                        [itemElem] = "elem"></app-item-element>
    </div>
  </div>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  itemElems = [{type: 'item', title:'Google Pixel', desc:'Android phone by Google', spec:''},
  {type: 'spec', title:'Specifications', desc:'', spec:"Specifications of Google Pixel"}];

  onItemAdded(itemData:{itemTitle: string, itemDesc: string}) {
    this.itemElems.push({
      type: 'item',
      title: itemData.itemTitle,
      desc: itemData.itemDesc,
      spec:''
    });
  }

  onItemSpecAdded(itemSpecData:{itemTitle: string, itemSpec: string}) {
    this.itemElems.push({
      type: 'spec',     
      //title: itemSpecData.itemTitle,
      title: 'Specifications',
      desc:'',
      //spec: itemSpecData.itemTitle
      spec: 'Specifications of '+ itemSpecData.itemTitle
    });
  }
  
}

item-element.component.html

<div
class="panel panel-default">
<div class="panel-heading">{{ itemElem.title }}</div>
<div class="panel-body">
  <p>
    <strong *ngIf="itemElem.type === 'item'" style="color: orange">{{ itemElem.desc }}</strong>
    <em *ngIf="itemElem.type === 'spec'">{{ itemElem.spec }}</em>
  </p>
</div>
</div>

item-element.component.ts

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

@Component({
  selector: 'app-item-element',
  templateUrl: './item-element.component.html',
  styleUrls: ['./item-element.component.css']
})
export class ItemElementComponent implements OnInit {

  @Input() itemElem : {type: string, title: string, desc: string, spec: string};

  constructor() { }

  ngOnInit(): void {
  }

}

create-item.component.html

<div class="row">
    <div class="col-xs-12">
      <p>Create Items and Specifications!</p>
      <label>Item Name</label>
      <input type="text" class="form-control" [(ngModel)]="newItemName">
      <label>Item Description</label>
      <input type="text" class="form-control" [(ngModel)]="newItemDesc">
      <br>
      <button
        class="btn btn-primary"
        (click)="onAddItem()">Add Item</button>
      <button
        class="btn btn-primary"
        (click)="onAddItemSpec()">Add Item Specifications</button>
    </div>
</div>

create-item.component.ts

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

@Component({
  selector: 'app-create-item',
  templateUrl: './create-item.component.html',
  styleUrls: ['./create-item.component.css']
})
export class CreateItemComponent implements OnInit {

  @Output() itemAdded = new EventEmitter<{itemTitle: string, itemDesc: string}>();
  @Output() itemSpecAdded = new EventEmitter<{itemTitle: string, itemSpec: string}>();

  newItemName = '';
  newItemDesc = '';
  newItemSpec = '';

  constructor() { }

  ngOnInit(): void {
  }

  onAddItem() {
    this.itemAdded.emit({
        itemTitle: this.newItemName, 
        itemDesc: this.newItemDesc
    });
  }

  onAddItemSpec() {
    this.itemSpecAdded.emit({
      itemTitle: this.newItemName, 
      itemSpec: this.newItemSpec
    });
  }

}

Solved: Can’t bind to ‘itemElem’ since it isn’t a known property of

The problem here is when you look at the following section in app.component.html code, it is evident that you are trying to bind to input property “itemElement” which does not exist.

<app-item-element *ngFor="let elem of itemElems"
                        [itemElement] = "elem"></app-item-element>

Take a look at the following declaration of itemElem property in ItemElementComponent.ts file. We could see that there is no property defined here called “itemElement”.

 @Input() itemElem : {type: string, title: string, desc: string, spec: string};

Therefore, you need to modify the above declaration to assign an alias ‘itemElement’ to the custom property that you had defined as shown below.

@Input('itemElement') itemElem : {type: string, title: string, desc: string, spec: string};

After making the above changes, it should fix the error Can’t bind to ‘itemElem’ since it isn’t a known property of ‘app-item-element’.

Note, you may also get the same error if you don’t mark the ItemElementComponent class field “itemElem” as an input property as shown below.

itemElem : {type: string, title: string, desc: string, spec: string};

Therefore, make sure that you mark your class field as an input property using @Input Decorator.

That’s it. Hope it helped 🙂

Also See:

References:

Angular Docs