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 7ed54e851117cdee52de37247bc4ae18ab124f4d..bcf6553d99892621d9ea4936df1dd91fad80dd7c 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 2b27eaee9e2a89f6f5677ab1b0f46037bdeb5149..c6ba096d718b9406ca750e5cba0d0217031edcdb 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 68c054ee8d091296df676f5e00a13b376b74ba21..b7a30324ff5590c9c909276478c744e962e3d349 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 a66ea2eca223d3f2e23071cf35dcb19abe382929..41e68b752472cd3fd4cf9111b4b8fcecc27826b3 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!');
+  }
 }