Update to match final course example.

Author: DeborahK

APM - Final/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
-import { RouterModule} from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 import { AppComponent }  from './app.component';
 import { WelcomeComponent } from './home/welcome.component';
@@ -15,12 +15,15 @@ import { ProductModule } from './products/product.module';
     HttpModule,
     RouterModule.forRoot([
       { path: 'welcome', component: WelcomeComponent },
-      { path: '', redirectTo: 'welcome', pathMatch: 'full'},
+      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
       { path: '**', redirectTo: 'welcome', pathMatch: 'full' }
     ]),
     ProductModule
   ],
-  declarations: [ AppComponent, WelcomeComponent ],
+  declarations: [
+    AppComponent,
+    WelcomeComponent
+  ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

APM - Final/app/products/product-filter.pipe.ts

@@ -6,9 +6,9 @@ import { IProduct } from './product';
 })
 export class ProductFilterPipe implements PipeTransform {
 
-    transform(value: IProduct[], filter: string): IProduct[] {
-        filter = filter ? filter.toLocaleLowerCase() : null;
-        return filter ? value.filter((product: IProduct) =>
-            product.productName.toLocaleLowerCase().indexOf(filter) !== -1) : value;
+    transform(value: IProduct[], filterBy: string): IProduct[] {
+        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
+        return filterBy ? value.filter((product: IProduct) =>
+            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
     }
 }

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

@@ -20,11 +20,13 @@ <h3>Filtered by: {{listFilter}} </h3>
         <div class='has-error' *ngIf='errorMessage'>{{errorMessage}}</div>
 
         <div class='table-responsive'>
-            <table class='table' *ngIf='products && products.length'>
+            <table class='table'
+                   *ngIf='products && products.length'>
                 <thead>
                     <tr>
                         <th>
-                            <button class='btn btn-primary' (click)='toggleImage()'>
+                            <button class='btn btn-primary'
+                                (click)='toggleImage()'>
                                 {{showImage ? 'Hide' : 'Show'}} Image
                             </button>
                         </th>
@@ -44,7 +46,7 @@ <h3>Filtered by: {{listFilter}} </h3>
                                  [style.width.px]='imageWidth' 
                                  [style.margin.px]='imageMargin'>
                         </td>
-                        <td> <a [routerLink]="['/product', product.productId]">
+                        <td><a [routerLink]="['/product', product.productId]">
                             {{product.productName}}
                             </a>
                         </td>

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

@@ -12,8 +12,9 @@ export class ProductListComponent implements OnInit {
     imageWidth: number = 50;
     imageMargin: number = 2;
     showImage: boolean = false;
-    listFilter: string = '';
+    listFilter: string;
     errorMessage: string;
+
     products: IProduct[];
 
     constructor(private _productService: ProductService) {
@@ -26,9 +27,8 @@ export class ProductListComponent implements OnInit {
 
     ngOnInit(): void {
         this._productService.getProducts()
-                     .subscribe(
-                       products => this.products = products,
-                       error =>  this.errorMessage = <any>error);
+                .subscribe(products => this.products = products,
+                           error => this.errorMessage = <any>error);
     }
 
     onRatingClicked(message: string): void {

APM - Final/app/shared/star.component.html

@@ -1,6 +1,6 @@
 <div class="crop" 
-    [style.width.px]="starWidth" 
-    [title]='rating'
+    [style.width.px]="starWidth"
+    [title]="rating"
     (click)='onClick()'>
     <div style="width: 86px">
         <span class="glyphicon glyphicon-star"></span>

APM - Final/package.json

@@ -13,7 +13,7 @@
         "postinstall": "typings install"
     },
     "license": "ISC",
-        "dependencies": {
+    "dependencies": {
         "@angular/common": "2.0.0",
         "@angular/compiler": "2.0.0",
         "@angular/core": "2.0.0",