title: Unable to display list item
body: <p>I am new to Angular and I am creating a simple single page food recipes application. I am trying to display a list of recipes which the user can select from but for some reason, it won;t read the property of the recipe object within the recipe array. An error message keeps appearing when recompiling which says "Property 'name' does not exist on type 'Recipe[]'".</p>
  
  <p>Here is the recipes.html file:</p>
  
  <pre><code>   &lt;link href="https://fonts.googleapis.com/css?family=Lobster&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;h2&gt;Recipes&lt;/h2&gt;
  &lt;div *ngFor="let recipeEl of recipe"&gt;
      &lt;a 
      href="#"
      class="list-group-item clearfix"&gt;
      &lt;div class="pull-left"&gt;
          &lt;h4 class="list-group-item-heading"&gt;{{ recipeEl.name }}&lt;/h4&gt;
          &lt;p class="list-group-item-text"&gt;{{ recipeEl.description }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;span class="pull-right"&gt;
          &lt;img 
          [src]="recipeEl.imagePath" 
          alt="{{ recipeEl.name }}"
          class="img-responsive"
          style="max-height: 50px"&gt;
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the recipes.component.ts file:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Recipe } from './recipes.model';
  import { Recipeservice } from './recipes.service';
  
  @Component({
    selector: 'app-recipes',
    templateUrl: './recipes.component.html',
    styleUrls: ['./recipes.component.css'],
  })
  export class RecipesComponent implements OnInit {
    @Input() recipe: Recipe[];
  
    constructor(private recipeService: Recipeservice) {}
  
    ngOnInit() {
      this.recipe = this.recipeService.getRecipes();
    }
  
  }
  </code></pre>
  
  <p>Here is the recipes.model.ts file:</p>
  
  <p>import { Ingredient } from "../shared/ingredient.model";</p>
  
  <pre><code>export class Recipe { 
    public name: string;
    public description: string;
    public imagePath: string;
    public ingredients: Ingredient[];
  
    constructor(name: string, desc: string, imagePath: string, ingredients: Ingredient[]) {
      this.name = name;
      this.description = desc;
      this.imagePath = imagePath;
      this.ingredients = ingredients;
    }
  }
  </code></pre>
  
  <p>Here is the recipes.service.ts file:</p>
  
  <pre><code>import { Recipe } from './recipes.model';
  import { Ingredient } from '../shared/ingredient.model';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class Recipeservice {
  
      private recipes: Recipe[] = [
          new Recipe('Spaghetti Carbonara', 'Authentic Italian Carbonara', 'https://cdn.pixabay.com/photo/2015/04/08/13/13/pasta-712664_960_720.jpg', [
              new Ingredient('Spaghetti', 500),
              new Ingredient('Lardons', 20),
              new Ingredient('egg', 4),
              new Ingredient('parmesan', 100),
              new Ingredient('Garlic', 1),
              new Ingredient('Olive Oil', 50)
          ])
      ]
  
          getRecipes() {
              return this.recipes.slice();
          }
  
  }
  </code></pre>