Solution for lab #16

alcfeoh · Jan 31, 2018 · 2d73ce8 · 2d73ce8
1 parent 9acd5ac
commit 2d73ce8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,8 +6,7 @@
   <div class="container">
     <div class="row" >
       <app-license-plate *ngFor="let plate of licensePlates | async" appHighlight
-                     [plate]="plate" buttonText="Add to cart" class="col-md-4">
-
+                     [plate]="plate" (onAddToCart)="addToCart($event)" buttonText="Add to cart" class="col-md-4">
       </app-license-plate>
     </div>
   </div>
@@ -16,3 +15,9 @@
 <footer class="container">
   <p>&copy; License Plate Store 2017</p>
 </footer>
+
+<app-popup-window [isOpen]="showPopup" title="Item added to cart" (onClose)="showPopup = false"  >
+  Thanks for shopping with us!
+</app-popup-window>
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -11,13 +11,14 @@ import {CartService} from './cart.service';
 export class AppComponent {
 
   licensePlates: Observable<LicensePlate[]>;
+  showPopup = false;
 
   constructor(private service: LicensePlateService, private cartService: CartService) {
       this.licensePlates = this.service.getList();
   }
 
   addToCart(plate: LicensePlate) {
     this.cartService.addToCart(plate)
-      .subscribe(done => alert(`Plate '${plate.title}' added to cart`));
+      .subscribe(done => this.showPopup = true);
   }
 }
diff --git a/src/app/license-plate/license-plate.component.html b/src/app/license-plate/license-plate.component.html
@@ -3,7 +3,7 @@ <h2>{{plate.title}} <img src="assets/sale.png" class="sale" *ngIf="plate.onSale"
 <p>{{plate.description}}</p>
 <div>
   <h2 class="float-left">{{plate.price | currencyRenderer: 1.40}}</h2>
-  <button class="btn btn-primary float-right" role="button" (click)="alert('Plate added to cart')">
+  <button class="btn btn-primary float-right" role="button" (click)="onAddToCart.emit(plate)">
     {{buttonText}}
   </button>
 </div>
diff --git a/src/app/license-plate/license-plate.component.ts b/src/app/license-plate/license-plate.component.ts
@@ -14,9 +14,7 @@ export class LicensePlateComponent {
   @Input()
   buttonText: string;
 
-  constructor() { }
+  @Output()
+  onAddToCart = new EventEmitter<LicensePlate>();
 
-  alert(message: string): void {
-    alert(message);
-  }
 }