在recipes資料夾，輸入ng g i recipe --type=model，新增Recipe Model。

結構圖
recipes
|-- recipe.model.ts

在recipe interface 建立以下屬性：

export interface Recipe {
  name: string;
  description: string;
  imagePath: string;
}

在recipe-list.component.ts，建立數筆範例資料：

recipes: Recipe[] = [
    {
      name: 'A Test Recipe',
      description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, porro.',
      imagePath: 'https://picsum.photos/100'
    },
    {
      name: 'A Test Recipe',
      description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, porro.',
      imagePath: 'https://picsum.photos/100'
    },
    {
      name: 'A Test Recipe',
      description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, porro.',
      imagePath: 'https://picsum.photos/100'
    }
  ];

Lorem Picsum，一個隨機產生圖片的網站，讓我們省去找圖的麻煩，並且可以直接在網址指定圖片大小。

recipe-list.component.html，設計資料顯示頁面：

<div class="row">
    <div class="col-12">
        <button class="btn btn-success">New Recipe</button>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <a href="#" *ngFor="let recipe of recipes">
            <div class="media mt-4">
                <div class="media-body">
                    <h5 class="mt-0 mb-1">{{ recipe.name }}</h5>
                    <p>{{ recipe.description }}</p>
                </div>
                <img [src]="recipe.imagePath" class="ml-3" alt="...">
            </div>
        </a>
        <app-recipe-item></app-recipe-item>
    </div>
</div>

這邊，使用了內嵌繫結、屬性繫結、ngfor結構型指令技巧。

recipe-list.component.scss：

a {
  color: #000000;
}
a:hover {
  text-decoration: none;
}

滑鼠經過a連結時，不要有底線，並且將文字由預設的藍色改為黑色。

完成的頁面：