Output-Beispiel für Product-Alerts

diff --git a/src/app/product-alerts/product-alerts.component.html b/src/app/product-alerts/product-alerts.component.html
index 7ed54e8..bcf6553 100644 (file)
--- a/src/app/product-alerts/product-alerts.component.html
+++ b/src/app/product-alerts/product-alerts.component.html
@@ -1,3 +1,3 @@
 <p *ngIf="product.price > 700">
-  <button>Notify Me</button>
+  <button (click)="notify.emit()">Notify Me</button>
 </p>

diff --git a/src/app/product-alerts/product-alerts.component.ts b/src/app/product-alerts/product-alerts.component.ts
index 2b27eae..c6ba096 100644 (file)
--- a/src/app/product-alerts/product-alerts.component.ts
+++ b/src/app/product-alerts/product-alerts.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-product-alerts',
@@ -8,6 +8,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class ProductAlertsComponent implements OnInit {
 
   @Input() product;
+  @Output() notify = new EventEmitter();
 
   constructor() { }
 

diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html
index 68c054e..b7a3032 100644 (file)
--- a/src/app/product-list/product-list.component.html
+++ b/src/app/product-list/product-list.component.html
@@ -12,6 +12,6 @@
     Share
   </button>
 
-  <app-product-alerts [product]="product"></app-product-alerts>
+  <app-product-alerts [product]="product" (notify)="onNotify()"></app-product-alerts>
 
 </div>

diff --git a/src/app/product-list/product-list.component.ts b/src/app/product-list/product-list.component.ts
index a66ea2e..41e68b7 100644 (file)
--- a/src/app/product-list/product-list.component.ts
+++ b/src/app/product-list/product-list.component.ts
@@ -12,4 +12,8 @@ export class ProductListComponent {
   share() {
     window.alert('The product has been pimmelled!');
   }
+
+  onNotify() {
+    window.alert('You have been pimmeld!');
+  }
 }