pablocattaneo
6/6/2017 - 12:15 PM

Loop

Loop

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;
  }
}

// Name file: namefile.model.ts
<a *ngFor="let recipe of recipes" 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 src={{recipe.imagePath}} alt="" class="img-responsive" style="max-height: 50px;">
  </span>
</a>

<!-- 

In this example I iteration over the model written in model.ts inside this gistbox and was instance inside de component.ts in this way

export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe('A Test Recipe', 'This is a simply a test', 'http://goodtoknow.media.ipcdigital.co.uk/111/00001428f/fe33_orh412w625/Tomato-baked-chicken-recipe.jpg'),
    new Recipe('Milanesa de Pollo', 'La milanesa de pollo es lo mejor', 'https://www.comedera.com/wp-content/uploads/2014/06/milanesa-de-pollo.jpg')
  ];

-->