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 e69de29..de06809 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 89b9fa6..cbd08a3 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 1ff6603..d9f2759 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 { Component, OnInit } from '@angular/core';

+import { MessageService } from '../message.service';

 
 @Component({
   selector: 'app-messages',
 
 @Component({
   selector: 'app-messages',


@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MessagesComponent implements OnInit {
 
 })
 export class MessagesComponent implements OnInit {
 

-  constructor() { }
+  constructor(public messageService : MessageService) { }

 
   ngOnInit() {
   }
 
   ngOnInit() {
   }