From 6cf1a6a74ad0cdefd6b940c5e8c2a81d1673be0e Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Sat, 2 May 2020 21:47:35 +0200
Subject: [PATCH] 4: Add Services g) Show messages - Display the message from
 HeroService + Bind to the    MessageService

---
 src/app/messages/messages.component.css  | 35 ++++++++++++++++++++++++
 src/app/messages/messages.component.html |  6 +++-
 src/app/messages/messages.component.ts   |  3 +-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css
index e69de29..de06809 100644
--- a/src/app/messages/messages.component.css
+++ b/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+button.clear {
+  color: #333;
+  margin-bottom: 12px;
+}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index 89b9fa6..cbd08a3 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -1 +1,5 @@
-<p>messages works!</p>
+<div *ngIf="messageService.messages.length">
+  <h2>Messages</h2>
+  <button class="clear" (click)="messageService.clear()">clear</button>
+  <div *ngFor="let message of messageService.messages">{{message}}</div>
+</div>
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index 1ff6603..d9f2759 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-messages',
@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MessagesComponent implements OnInit {
 
-  constructor() { }
+  constructor(public messageService : MessageService) { }
 
   ngOnInit() {
   }
-- 
2.20.1