adding two way binding and using some pipes to format currency and some other values

Author: aneguzman

APM - Start/app/products/product-list.component.html

@@ -8,12 +8,12 @@
         <div class='row'>
             <div class='col-md-2'>Filter by:</div>
             <div class='col-md-4'>
-                <input type='text' />
+                <input [(ngModel)]='listFilter' type='text' />
             </div>
         </div>
         <div class='row' >
             <div class='col-md-6'>
-                <h3>Filtered by:  </h3>
+                <h3>Filtered by:  {{listFilter}}</h3>
             </div>
         </div>
 
@@ -45,13 +45,13 @@ <h3>Filtered by:  </h3>
                         	{{product.productName}} 
                         </td>
                         <td>
-                        	{{product.productCode}}
+                        	{{product.productCode | lowercase}}
                         </td>
                         <td>
                         	{{product.releaseDate}}
                         </td>
                         <td>
-                        	{{product.price}}
+                        	{{product.price | currency:'USD':true:'1.2-2'}}
                         </td>
                         <td>
                         	{{product.starRating}}

APM - Start/app/products/product-list.component.ts

@@ -9,6 +9,7 @@ export class ProductListComponent{
 	imageWidth: number = 50;
 	imageMargin: number = 2;
 	showImage: boolean = false;
+	listFilter: string = 'cart';
 	products: any[] = [    
 	{
 		"productId": 1,