progress as far more on components

Author: Ian Ellis

APM - Start/app/app.module.ts

@@ -1,11 +1,20 @@
+//this is how we import external modules
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
+//this is how we import internal modules
 import { AppComponent }  from './app.component';
 import { ProductListComponent } from './products/product-list.component';
 
+//this is how we declare which modules we would like to use from the above imported modules
 @NgModule({
-  imports: [ BrowserModule ],
+  //imports is used for external/3rd party directives, components and pipes
+  imports: [ 
+    BrowserModule,
+    FormsModule
+  ],
+  //declarations is used for our directives, components and pipes
   declarations: [
     AppComponent, 
     ProductListComponent

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

@@ -0,0 +1,3 @@
+thead {
+    color: #337AB7;
+}

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

@@ -6,20 +6,25 @@
         <div class="row">
             <div class="col-md-2">Filtered by:</div>
             <div class="col-md-4">
-                <input type="text" />
+                <!-- 2 way data binding i.e. setting the listFilter property in product-list.component.ts to the value of the input -->
+                <input type="text" [(ngModel)]="listFilter"/>
             </div>
         </div>
         <div class="row">
             <div class="col-md-6">
-                <h3>Filtered by: </h3>
+                <!-- displaying the value of listFilter which is set by the input above via 2 way data banding -->
+                <h3>Filtered by: {{listFilter}}</h3>
             </div>
         </div>
         <div class="table-responsive">
             <table class="table" *ngIf="products && products.length">
                 <thead>
                     <tr>
                         <th>
-                            <button class="btn btn-primary">Show Image</button>
+                            <button class="btn btn-primary"
+                                    (click)="toggleImage()">
+                                    {{showImage ? 'Hide' : 'Show'}} Image
+                            </button>
                         </th>
                         <th>Product</th>
                         <th>Code</th>
@@ -30,11 +35,17 @@ <h3>Filtered by: </h3>
                 </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':true:'1.2-2'}}</td>
                         <td>{{product.starRating}}</td>
                     </tr>
                 </tbody>

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

@@ -1,12 +1,19 @@
 import { Component } from '@angular/core';
+import { IProduct } from './product';
 
 @Component({
     selector: 'pm-products',
-    templateUrl: 'app/products/product-list.component.html'
+    templateUrl: 'app/products/product-list.component.html',
+    styleUrls: ['app/products/product-list.component.css']
 })
 export class ProductListComponent {
     pageTitle: string = 'Product List';
-    products: any[] = [
+    imageWidth: number = 50;
+    imageMargin: number = 2;
+    showImage: boolean = false;
+    listFilter: string = 'cart';
+
+    products: IProduct[] = [
         {
             "productId": 1,
             "productName": "Leaf Rake",
@@ -58,4 +65,8 @@ export class ProductListComponent {
             "imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
         }
     ];
+
+    toggleImage(): void {
+        this.showImage = !this.showImage;
+    }
 }

APM - Start/app/products/product.ts

@@ -0,0 +1,10 @@
+export interface IProduct {
+    productId: number,
+    productName: string,
+    productCode: string,
+    releaseDate: string,
+    description: string,
+    price: number,
+    starRating: number,
+    imageUrl: string
+}