As of Module 7

Author: DeborahK

APM-CLI-Final/src/app/app.module.ts

@@ -5,12 +5,14 @@ import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { ProductListComponent } from './products/product-list.component';
 import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
+import { StarComponent } from './shared/star.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ProductListComponent,
-    ConvertToSpacesPipe
+    ConvertToSpacesPipe,
+    StarComponent
   ],
   imports: [
     BrowserModule,

APM-CLI-Final/src/app/products/product-list.component.css

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

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

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

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

@@ -50,6 +50,10 @@ export class ProductListComponent implements OnInit {
         this.listFilter = 'cart';
     }
 
+    onRatingClicked(message: string): void {
+        this.pageTitle = 'Product List: ' + message;
+    }
+
     performFilter(filterBy: string): IProduct[] {
         filterBy = filterBy.toLocaleLowerCase();
         return this.products.filter((product: IProduct) =>

APM-CLI-Final/src/app/products/product.ts

@@ -8,3 +8,4 @@ export interface IProduct {
     starRating: number;
     imageUrl: string;
 }
+

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

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

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

@@ -0,0 +1,21 @@
+import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'pm-star',
+    templateUrl: './star.component.html',
+    styleUrls: ['./star.component.css']
+})
+export class StarComponent implements OnChanges {
+    @Input() rating: number;
+    starWidth: number;
+    @Output() ratingClicked: EventEmitter<string> =
+            new EventEmitter<string>();
+
+    ngOnChanges(): void {
+        this.starWidth = this.rating * 86 / 5;
+    }
+
+    onClick(): void {
+        this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
+    }
+}