Cacher is the code snippet organizer for pro developers

// define how a single Recipe will look like (a blueprint for objects we create)
export class Recipe {
  public name: string;
  public description: string;
  public imagePath: string;

  // a constructor is a built in function
  constructor(name: string, desc: string, imagePath: string) {
    this.name = name;
    this.description = desc;
    this.imagePath = imagePath;
  }
}

<div class="row">
  <div class="col-xs-12">
    <div class="btn btn-success">New Recipe</div>
    <br><br>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <a href="" class="list-group-item clearfix" *ngFor="let recipe of recipes">
      <span class="pull-left">
        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
        <p class="list-group-item-text">{{ recipe.description }}</p>
      </span>
      <span class="pull-right">
        <!-- src="{{ recipe.imagePath }}" will also work -->
        <img class="img-responsive" [src]="recipe.imagePath" alt="{{ recipe.name }}" style="max-height: 50px;">
      </span>
    </a>
    <app-recipe-item></app-recipe-item>
  </div>
</div>