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 class = "row" > class = "col-xs-12" > class = "btn btn-success" >New Recipebutton> class = "row" > class = "col-xs-12" > "#" class = "list-group-item clearfix" *ngFor= "let recipe of recipes" > class = "pull-left" > class = "list-group-item-heading" >{{recipe.name}} class = "list-group-item-text" >{{recipe.description}} class = "pull-right" > "recipe.imagePath" alt= "{{recipe.name}}" class = "img-responsive" style= "max-height: 50px;" > a> app-recipe-item> 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() { } }

Arvind Kushwaha · Answer

Hi Mark, Your recipes array has only one item, So if one item is visible on html it is correct. To show multiple row on html page, you have to add the more item in array. 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' ), new Recipe( 'this is test recipe2' , 'this is its description2' , 'https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg' ) ];