export class Recipe {
    constructor(public name, public description, public imagepath){}
}

import {Component,Input} from "@angular/core";
import {Recipe} from '../recipe'

@Component({
    moduleId:module.id,
    selector: "recipeitem",
    templateUrl: "./recipeitem.html"
})
export class RecipeItemComponent {
    @Input() recipe:Recipe;
}

<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 class="img-responsive" src="{{recipe.imagePath}}" alt="No Image"/>
  </span>
</a>

import {Component} from "@angular/core";
import {Recipe} from '../recipe'

@Component({
    moduleId:module.id,
    selector: "recipeList",
    templateUrl: "./recipeList.html"
})
export class RecipeListComponent {
    constructor() {}
    recipes:Recipe[]=[
        new Recipe('Gobi','Very Tasty','../../images/gobi.jpg'),
        new Recipe('jamoon','Sweet','../../images/jamoon.jpg')
    ];
}

<div class="row">
    <div class="col-xs-12">
        <a class="btn btn-success">New Recipe</a>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
            <recipeitem *ngFor="let recipe of recipes" [recipe] ="recipe"></recipeitem>
        </ul>
    </div>
</div>