Module 6: Data Binding & Pipes completed.

Author: TXCodeDancer

APM/src/app/app.module.ts

@@ -1,16 +1,18 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule} from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { ProductListComponent } from './products/product-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ProductListComponent
+    ProductListComponent,
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule,
   ],
   bootstrap: [AppComponent]
 })

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

@@ -6,12 +6,13 @@
         <div class="row">
             <div class="col-md-2">Filter by:</div>
             <div class="dol-md-4">
-                <input type="text" />
+                <input type="text"
+                    [(ngModel)]='listFilter' />
             </div>
         </div>
         <div class="row">
             <div class="col-md-6">
-                <h4>Filtered by: </h4>
+                <h4>Filtered by: {{listFilter}} </h4>
             </div>
         </div>
         <div class="table-responsive">
@@ -20,8 +21,9 @@ <h4>Filtered by: </h4>
                 <thead>
                     <tr>
                         <th>
-                            <button class="btn-primary">
-                                Show Image
+                            <button class="btn-primary"
+                            (click)="toggleImage()">
+                                {{showImage ? 'Hide' : 'Show'}} Image
                             </button>
                         </th>
                         <th>Product</th>
@@ -33,11 +35,17 @@ <h4>Filtered by: </h4>
                 </thead>
                 <tbody>
                     <tr *ngFor='let product of products'>
-                        <td></td>
+                        <td>
+                            <img *ngIf='showImage'
+                                [src]='product.imageUrl'
+                                [title]='product.productName'
+                                [style.width.px]='imageWidth'
+                                [style.margin.px]='imageMargin'>
+                        </td>
                         <td>{{ product.productName }}</td>
-                        <td>{{ product.productCode }}</td>
+                        <td>{{ product.productCode | lowercase }}</td>
                         <td>{{ product.releaseDate }}</td>
-                        <td>{{ product.price }}</td>
+                        <td>{{ product.price | currency:'USD':'symbol':'1.2-2' }}</td>
                         <td>{{ product.starRating }}</td>
                     </tr>
 

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

@@ -6,6 +6,10 @@ import { Component } from '@angular/core';
 })
 export class ProductListComponent {
     pageTitle: string = 'Product List';
+    imageWidth: number=50;
+    imageMargin: number=2;
+    showImage: boolean=false;
+    listFilter: string='cart';
     products: any[] = [
         {
             "productId": 1,
@@ -38,4 +42,9 @@ export class ProductListComponent {
             "imageUrl": "assets/images/hammer.png"
           },        
     ];
+
+    toggleImage(): void
+    {
+      this.showImage = !this.showImage;
+    }
 }