Angular 8 ERROR TypeError: Cannot read property 'name' of undefined

Question

I am playing around with angular and I get this error: ERROR TypeError: Cannot read property 'name' of undefined My code is

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('Test', 'Test Code', 'https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg'),
    new Recipe('Test 2', 'Test Code', 'https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg')
  ];

  constructor() { }

  ngOnInit() {
  }

}

recipe-list.component.html

<div class="row">
    <div class="div col-xs-12">
        <button class="btn btn-success">New Recipe</button>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
      <app-recipe-item
        *ngFor="let recipeEl of recipes"
      [recipe]="recipeEl"></app-recipe-item>
    </div>
</div>
<app-recipe-item></app-recipe-item>

recipe-item.compoent.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>

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() {
    console.log('Recipe is' + this.recipe);
  }

  ngOnInit() {
  }

}

I can't seem to find the problem with my code. Why is it adding a empty element shown in the screenshot

There's an extra element being shown in the screen shot & the error is occurring because it looks like the ngFor* is reading out of bounds - as seen by the current error lying on Node 3. Have you got any other pieces of code which manipulate RecipeListComponent ? — EGC
– EGC, Commented Jan 10, 2020 at 0:35
Look closely to this error 'recipe is undefined', check if your import is correct import { Recipe } from '../recipe.model' — Rohit Jain
– Rohit Jain, Commented Jan 10, 2020 at 0:35

Jorge Mussato · Accepted Answer · 2020-01-10 01:56:45Z

3

You can simply solve this by using the "safe navigation operator".

When you use the interpolation, it is recommended to use ? ("safe navigation") when the object may be undefined.

<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>

This will clear your console problems, but you may need to *ngFor in a div that surrounds the component:

<div *ngFor="let recipeEl of recipes">
    <app-recipe-item [recipe]="recipeEl"></app-recipe-item>
</div>

And a plus: when you are working inside a HTML tag, don't use interpolation, use property binding instead. (example [alt]="recipe.name")

answered Jan 10, 2020 at 1:56

Jorge Mussato

2,5942 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Wills Over a year ago

Just curious, the safe operator is not typescript or javascript syntax, right? Seem to be angular-specific syntax.

Jorge Mussato Over a year ago

Yea, it's an angular syntax. reference: link

ulmas · Accepted Answer · 2020-01-10 03:37:25Z

0

I think I cracked this case: in your recipe-list component template you have <app-recipe-item></app-recipe-item> added at the end for some reason, seems like some leftover code.

The errors are likely being thrown by that component because there is no any input value provided to it. This also explains the empty element you have at the bottom of the screenshot.

Remove that and that should solve the console error you mentioned, and get rid of the empty element. Good luck!

edited Jan 10, 2020 at 3:37

answered Jan 10, 2020 at 3:32

ulmas

2,25316 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular 8 ERROR TypeError: Cannot read property 'name' of undefined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related