My Angular Component html is showing half content

Question

Hi I am following a video series for angular 2 from udemy I am following all things exactly

 

below is my recipe-list-component

<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New Recipebutton>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
<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>
<app-recipe-item>app-recipe-item>
</div>
</div>

it did not show the content of my second row even if i put the static content like instead of recipe.name i type string name even than it is not showing , but it shows the first row data and content .

 

below is my model class

export class Recipe{
public name:string;
public description:string;
public imagePath:string;
constructor(name:string,desc:string,imagepath:string){
this.name=name;
this.description=desc;
this.imagePath=imagepath;
}
}

and my recipe -list component.ts is below

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('this is test recipe','this is its description','https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg')
];
constructor() { }
ngOnInit() {
}
}