entregar

iron-nutrition/src/app/food-list/food-list.component.html

@@ -1,3 +1,14 @@
 <p>
   food-list works!
 </p>
+
+<h2>IT 1 | Display foods</h2>
+<ul>
+  <li *ngFor = "let food of foods">
+    <img src="{{food.image}}">
+    <p>name:{{food.name}}</p>
+    <p>calories:{{food.calories}}</p>
+  </li>
+</ul>
+
+<button (click)="addFood()">Submit New Food</button>

iron-nutrition/src/app/food-list/food-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import foods from '../foods';
+import foodList from '../foods';
 
 @Component({
   selector: 'app-food-list',
@@ -8,9 +8,28 @@ import foods from '../foods';
 })
 export class FoodListComponent implements OnInit {
 
+  foods: Object [];
+  newFood: Object = {
+    name: '',
+    calories: '',
+    image: '',
+    quantity: ''
+  };
+
   constructor() { }
 
   ngOnInit() {
+    this.foods = foodList;
+  }
+
+  addFood() {
+    this.foods.push(this.newFood);
+    this.newFood = {
+      name: '',
+      calories: '',
+      image: '',
+      quantity: ''
+    };
   }
 
 }