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')
];
-->