iteration 2: search food DONE adding pipe and created model

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 { FoodFinderPipe } from './pipes/food-finder.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
     FoodListComponent,
+    FoodFinderPipe,
   ],
   imports: [
     BrowserModule,

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

@@ -1,7 +1,11 @@
-<div *ngFor="let food of foods" class="card" style="width: 18rem;">
-  <img class="card-img-top" src="{{food.image}}" alt="food">
-  <div class="card-body">
-    <h5 class="card-title">{{food.name}}</h5>
-    <p class="card-text">{{food.calories}} Calories</p>
+<div class="container">
+  <input type="text" class="form-control" placeholder="Search food..." name="searchFood" [(ngModel)]="searchFood" style="width:500px">
+
+  <div *ngFor="let food of foods | foodFinder: searchFood" class="card" style="width: 18rem;">
+    <img class="card-img-top" src="{{food.image}}" alt="food">
+    <div class="card-body">
+      <h5 class="card-title" name="name">{{food.name}}</h5>
+      <p class="card-text">{{food.calories}} Calories</p>
+    </div>
   </div>
 </div>

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

@@ -8,4 +8,6 @@ import foods from '../foods';
 })
 export class FoodListComponent  {
   foods: Array<Object> = foods;
+  searchFood: string;
 }
+

starter-code/src/app/pipes/food-finder.pipe.spec.ts

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

starter-code/src/app/pipes/food-finder.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Food } from './../shared/models/food.model'
+
+@Pipe({
+  name: 'foodFinder'
+})
+export class FoodFinderPipe implements PipeTransform {
+
+  transform(foods: Food[], searchFood: string): Food[] {
+
+    if (!foods || !searchFood){
+      return foods;
+    }
+
+    return foods.filter(food => 
+      food.name.toLowerCase().indexOf(searchFood.toLowerCase()) !== -1);
+    }
+}

starter-code/src/app/shared/models/food.model.ts

@@ -0,0 +1,6 @@
+export class Food {
+  name: string;
+  calories: number;
+  image: string;
+  quantity: number;
+}