Modified the Star component to generate output events.

Author: DeborahK

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

@@ -51,7 +51,8 @@ <h3>Filtered by: {{listFilter}} </h3>
                         <td>{{ product.productCode }}</td>
                         <td>{{ product.releaseDate }}</td>
                         <td>{{ product.price | currency:'USD':true }}</td>
-                        <td><in-star [rating]='product.starRating'></in-star></td>
+                        <td><in-star [rating]='product.starRating'
+                            (ratingClicked)='onRatingClicked($event)'></in-star></td>
                     </tr>
                 </tbody>
             </table>

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

@@ -39,7 +39,7 @@ export class ProductListComponent implements OnInit {
         this.showImage = !this.showImage;
     }
 
-    onFilterChanged(filter: string) {
-        this.listFilter = filter;
+    onRatingClicked(message: string): void {
+        this.pageTitle = 'Product List: ' + message;
     }
 }

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

@@ -1,3 +1,7 @@
 .crop {
     overflow: hidden;
 }
+
+span {
+    cursor: pointer;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from 'angular2/core';
+import { Component, OnChanges, Input, Output, EventEmitter } from 'angular2/core';
 
 @Component({
     selector: 'in-star',
@@ -8,10 +8,15 @@ import { Component, Input, OnChanges } from 'angular2/core';
 export class StarComponent implements OnChanges {
     @Input() rating: number;
     starWidth: number;
+    @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();
 
     ngOnChanges() {
         // Convert x out of 5 starts
         // to y out of 86px width
         this.starWidth = this.rating * 86/5;
-    }    
+    }
+    
+    onClick() {
+        this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
+    }
 }