From: Kai Moritz <kai@juplo.de>
Date: Sat, 21 Dec 2019 11:23:47 +0000 (+0100)
Subject: Output-Beispiel für Product-Alerts
X-Git-Url: https://juplo.de/gitweb/?p=examples%2Fangular-tutorial;a=commitdiff_plain;h=2e1af39839a0657199c4f4cb339c775a70ccf33d

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
--- 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
--- 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
--- 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
--- 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!');
+  }
 }