Typescript Error: Property does not exist on value of type

When I was trying to pass component data with property binding, I got the following typescript error : Property does not exist on value of type. This tutorial guides you how to resolve this error and also guides on how to pass recipe data with property binding.

Typescript Error: Property does not exist on value of type

While I was trying the below example – Passing recipe data with property binding I got the following error.

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client:52 [WDS] Live Reloading enabled.
client:150 [WDS] Errors while compiling. Reload prevented.
errors @ client:150
client:159 src/app/recipes/recipe-list/recipe-item/recipe-item.component.html:5:26 - error TS2339: Property 'recipes' does not exist on type 'RecipeItemComponent'.

5    *ngFor="let recipe of recipes">
                           ~~~~~~~

  src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts:5:16
    5   templateUrl: './recipe-item.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RecipeItemComponent.

Example : Passing recipe data with property binding

Note, the parent-child relationship for the below example is as follows.

--recipes
---- recipe.model.ts
---- recipe-detail
---- recipe-list
------ recipe-item

Display recipe name and description via recipe item component via String interpolation

recipes/recipe-list/recipe-item/recipe-item.component.html

<a href="#" 
   class="list-group-item clearfix">
    <div class="pull-left">
        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
        <p class="list-group-item-text">{{ recipe.description }}</p>
    </div>
    <span class="pull-right">
        <img 
             [src] = "recipe.imagePath"
             alt="{{ recipe.name }}" 
             class="img-responsive" 
             style="max-height: 50px;"> 
    </span>
</a>

recipes/recipe-list/recipe-item/recipe-item.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

recipes/recipe-list/recipe-list.component.html

For example, to pass recipe data with property binding and use ngFor loop refer below section.

<div class="row">
    <div class="col-xs-12">
        <div class="pull-left">
            <h3>My Recipe List</h3>
        </div>   
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">        
        <app-recipe-item 
          *ngFor="let recipe of recipes"
          [recipe] = "recipe"></app-recipe-item>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
        <div class="pull-right">
            <button class="btn btn-success">Add Recipe</button>
        </div>        
    </div>
</div>

recipes/recipe-list/recipe-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Recipe } from '../recipe.model';

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

  recipes: Recipe[] = [
    new Recipe('Recipe 1', 'This is our first recipe', 'https://lilluna.com/wp-content/uploads/2017/10/spanish-rice-resize-6.jpg'),
    new Recipe('Recipe 2', 'This is our second recipe', 'https://food.fnr.sndimg.com/content/dam/images/food/fullset/2020/07/14/0/FNK_20-Minute-Sausage-And-Pepper-Ravioli-Skillet_H_s4x3.jpg.rend.hgtvcom.441.331.suffix/1594757098344.jpeg'),
    new Recipe('Recipe 3', 'This is our third recipe', 'https://images.squarespace-cdn.com/content/v1/5c089f01f93fd410a92e642a/1589512502567-CNOAIL05BVT1TI0422P2/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/pheasant+back+burger+recipe.jpeg'),
    new Recipe('Recipe 4', 'This is our fourth recipe', 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQunf0MIpWZn3rjR-mo4u9_HKsL0Ud3SV8WTQ&usqp=CAU'),
    new Recipe('Recipe 5', 'This is our fifth recipe', 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ_9l39e7G5y_ENz6hL6l5KhaJuroOrbzqs0Q&usqp=CAU')
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

recipes/recipe.model.ts

export class Recipe {
    public name : string;
    public description : string;
    public imagePath : string;

    constructor(name : string, description : string, imagePath : string){
        this.name = name;
        this.description = description;
        this.imagePath = imagePath;
    } 
}

Solution:

I figured out the reason why I was getting error Property ‘recipes’ does not exist on type ‘RecipeItemComponent’. I forgot to add the following statement in the RecipeItemComponent class.

  @Input() recipe: Recipe;

recipe-item.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Recipe } from '../../recipe.model';

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

  @Input() recipe: Recipe;

  constructor() { }

  ngOnInit(): void {
  }

}

After, modifying the RecipeItemComponent class like above, the Typescript Error: Property does not exist on value of type gone away.

Hope it helped 🙂