Iteration2

starter-code/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'Disfruta de nuestra App!!!';
 }

starter-code/src/app/app.module.ts

@@ -5,11 +5,13 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 import { FoodListComponent } from './food-list/food-list.component';
+import { FilterPipe } from './food-list/filter.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
     FoodListComponent,
+    FilterPipe,
   ],
   imports: [
     BrowserModule,

starter-code/src/app/food-list/filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FilterPipe } from './filter.pipe';
+
+describe('FilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

starter-code/src/app/food-list/filter.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(items: any[], field: string, value: string): any[] {
+    if (!items) {
+      return [];
+    }
+
+    if (!value) {
+      return items;
+    }
+
+    const myPattern = new RegExp(value, 'i');
+    return items.filter(it => it[field].match(myPattern));
+  }
+}

starter-code/src/app/food-list/food-list.component.html

@@ -1,9 +1,20 @@
-<h1>
-  Esto es la lista de comida
-</h1>
-<div *ngFor="let food of foods" >
-<h3>Food name:{{food.name}}</h3>
-<img [src]="food.image" height='40px' />
-<p>Calories: {{food.calories}}</p>
-<p>Quantity: {{food.quantity}} </p>
+<h2>
+  Usa nuestra lista de comida
+</h2>
+
+<!-- <input type="text" placeholder="Buscar" > -->
+
+<div>
+  <label for="things_name"> Busqueda de comida </label>
+  <input id="food_name" placeholder="food data" type="text" [(ngModel)]="pattern">
+  <div>
+
+<h3> Comida encontrada </h3>
+
+
+<div *ngFor="let food of foods| filter:'name':pattern">
+  <h3>Food name:{{food.name}}</h3>
+  <img [src]="food.image" height='40px' />
+  <p>Calories: {{food.calories}}</p>
+  <p>Quantity: {{food.quantity}} </p>
 </div>

starter-code/src/app/food-list/food-list.component.ts

@@ -9,6 +9,7 @@ import foods from '../foods';
 export class FoodListComponent implements OnInit {
 
     foods:Object[];
+
 
   constructor() {
     this.foods = foods;