4: Add Services

g) Show messages - Display the message from HeroService + Bind to the
   MessageService

diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..de0680985655caccca90b93bfaf62846de571bc1 100644 (file)
--- 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 89b9fa6e507bbd1d76b19b8d78131e2c42c208c1..cbd08a315d2ea5c47145a2f7908722f6ed87d575 100644 (file)
--- 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 1ff660361e9fe611b842c57e27a9c381e64f3a6f..d9f275974db3b433291c3f8586384b6f40881b0b 100644 (file)
--- 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() {
   }