diff --git a/angular-tour-of-heroes/src/app/app.component.html b/angular-tour-of-heroes/src/app/app.component.html
index ee3d478..cb45ac4 100644
--- a/angular-tour-of-heroes/src/app/app.component.html
+++ b/angular-tour-of-heroes/src/app/app.component.html
@@ -1,2 +1,3 @@
{{title}}
+
diff --git a/angular-tour-of-heroes/src/app/app.module.ts b/angular-tour-of-heroes/src/app/app.module.ts
index 7256041..14166af 100644
--- a/angular-tour-of-heroes/src/app/app.module.ts
+++ b/angular-tour-of-heroes/src/app/app.module.ts
@@ -5,12 +5,14 @@ import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+import { MessagesComponent } from './messages/messages.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
- HeroDetailComponent
+ HeroDetailComponent,
+ MessagesComponent
],
imports: [
BrowserModule,
diff --git a/angular-tour-of-heroes/src/app/hero.service.ts b/angular-tour-of-heroes/src/app/hero.service.ts
index a3fe7fc..5f1649e 100644
--- a/angular-tour-of-heroes/src/app/hero.service.ts
+++ b/angular-tour-of-heroes/src/app/hero.service.ts
@@ -2,15 +2,18 @@ import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
+import { MessageService } from './message.service';
@Injectable({
providedIn: 'root'
})
export class HeroService {
- constructor() { }
+ constructor(private messageService: MessageService) { }
getHeroes(): Observable {
+ // TODO: send the message _after_ fetching the heroes
+ this.messageService.add('HeroService: fetched heroes.')
return of(HEROES);
}
}
diff --git a/angular-tour-of-heroes/src/app/message.service.spec.ts b/angular-tour-of-heroes/src/app/message.service.spec.ts
new file mode 100644
index 0000000..24d2d1d
--- /dev/null
+++ b/angular-tour-of-heroes/src/app/message.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: MessageService = TestBed.get(MessageService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/angular-tour-of-heroes/src/app/message.service.ts b/angular-tour-of-heroes/src/app/message.service.ts
new file mode 100644
index 0000000..b7387b7
--- /dev/null
+++ b/angular-tour-of-heroes/src/app/message.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MessageService {
+ messages: string[] = [];
+
+ add(message: string) {
+ this.messages.push(message);
+ }
+
+ clear() {
+ this.messages = [];
+ }
+}
diff --git a/angular-tour-of-heroes/src/app/messages/messages.component.css b/angular-tour-of-heroes/src/app/messages/messages.component.css
new file mode 100644
index 0000000..de06809
--- /dev/null
+++ b/angular-tour-of-heroes/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/angular-tour-of-heroes/src/app/messages/messages.component.html b/angular-tour-of-heroes/src/app/messages/messages.component.html
new file mode 100644
index 0000000..1df7dfd
--- /dev/null
+++ b/angular-tour-of-heroes/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+
+
+
Messages
+
+
{{message}}
+
+
diff --git a/angular-tour-of-heroes/src/app/messages/messages.component.spec.ts b/angular-tour-of-heroes/src/app/messages/messages.component.spec.ts
new file mode 100644
index 0000000..66109cc
--- /dev/null
+++ b/angular-tour-of-heroes/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+ let component: MessagesComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MessagesComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MessagesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/angular-tour-of-heroes/src/app/messages/messages.component.ts b/angular-tour-of-heroes/src/app/messages/messages.component.ts
new file mode 100644
index 0000000..95165a5
--- /dev/null
+++ b/angular-tour-of-heroes/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+ selector: 'app-messages',
+ templateUrl: './messages.component.html',
+ styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+ constructor(public messageService: MessageService) { }
+
+ ngOnInit() {
+ }
+
+}